img { width: 50px; height: 50px; outline:5px dotted yellow; } span {
font-size:16px;
background:pink;
border: 5px dashed blue;
padding: 0 25px;
text-decoration: underline overline line-through;
color:brown;
text-shadow: none;
}
i {
display:inline-block;
height: 50px;
width: 5em;
background: blue;
outline:5px dotted yellow;
text-shadow: none;
}
u {
padding-left:140px;
}
v {
padding-right:140px;
}
.rtl {
direction:rtl;
}
.rlo span {
unicode-bidi: bidi-override; direction: rtl;
}
.lro span {
unicode-bidi: bidi-override; direction: ltr;
}
.h {display:none} iframe {
width: 100px;
height: 50px;
}
</style>
<script> var c = "data:text/html,CSS is awesome"
function initIFRAME() { var f = document.getElementsByTagName('iframe');
for (i = 0; i < f.length; ++i) {
f[i].setAttribute('src', c);
}
setTimeout(function(){document.body.style.width='500px'},0);
}
function setTextOverflow(str,quoted) { var x = document.styleSheets[0]; var q = quoted ? '"' : '';
x.insertRule('.test{text-overflow:' + q + str + q +'}', x.cssRules.length);
}
</script>
</head><body onload="initIFRAME()">
text-overflow:"" | <button onclick="setTextOverflow('ellipsis')">ellipsis</button> | <button onclick="setTextOverflow('clip')">clip</button> (Try "." or "" for example) <br>
LTR / LTR
<div class="test">
<span><iframe></iframe>CSS is awesome CSS<i>overflowing-inline-block</i><u> is awesome</u></span><br>
<span>CSS is awe<iframe></iframe>some CSS is awesome <i></i></span><br>
<span>C SS is awesome<button>BUTTON</button> CSS is <iframe></iframe>awesom e </span><br>
<span>CSS is awesome CSS is awesome <button>BUTTON</button></span><br>
<br><br></div>
RTL / LTR
<div class="test rtl">
<span><iframe></iframe><v>CSS is awesome CSS</v><i>overflowing-inline-block</i> is awesome </span><br>
<span>CSS is awe<iframe></iframe>some CSS is awesome <i></i></span><br>
<span>C SS is awesome<button>BUTTON</button> CSS is <iframe></iframe>awesom e </span><br>
<span>CSS is awesome CSS is awesome <button>BUTTON</button></span><br>
<br><br></div>
LTR / RTL
<div class="test rlo">
<span><iframe></iframe>CSS is awesome CSS<i>overflowing-inline-block</i> is awesome </span><br>
<span>CSS is awe<iframe></iframe>some CSS is awesome <i></i></span><br>
<span>C SS is awesome<button>BUTTON</button> CSS is <iframe></iframe>awesom e </span><br>
<span><button>BUTTON</button>CSS is awesome CSS is awesome </span><br>
<br><br></div>
RTL / RTL
<div class="test rtl rlo">
<span><iframe></iframe>CSS is awesome CSS<i>overflowing-inline-block</i> is awesome </span><br>
<span>CSS is awe<iframe></iframe>some CSS is awesome <i></i></span><br>
<span>C SS is awesome<button>BUTTON</button> CSS is <iframe></iframe>awesom e </span><br>
<span><button>BUTTON</button>CSS is awesome CSS is awesome </span><br>
<br><br></div>
</body></html>
Messung V0.5
¤ Dauer der Verarbeitung: 0.19 Sekunden
(vorverarbeitet)
¤
Die Informationen auf dieser Webseite wurden
nach bestem Wissen sorgfältig zusammengestellt. Es wird jedoch weder Vollständigkeit, noch Richtigkeit,
noch Qualität der bereit gestellten Informationen zugesichert.
Bemerkung:
Die farbliche Syntaxdarstellung und die Messung sind noch experimentell.