<!DOCTYPE HTML >
<!--
Any copyright is dedicated to the Public Domain .
http : / / creativecommons . org / licenses / publicdomain /
Test : visibility : hidden should not trigger text - overflow markers
-->
<html ><head >
<title >text-overflow: visibility:hidden</title >
<style type="text/css" >
@font -face {
font -family: DejaVuSansMono;
src: url(../fonts/DejaVuSansMono.woff);
}
html ,body {
color:black; background-color:white; font -size:16 px; padding:0 ; margin:0 ; font -family:DejaVuSansMono;
}
.test {
text-overflow:ellipsis;
overflow: hidden;
white-space: nowrap;
background:lime;
color: black;
width: 50 %;
}
.rtl {
direction:rtl;
}
.rlo {
unicode-bidi: bidi-override; direction: rtl;
}
u {
visibility:hidden;
padding-left: 3 em ;
background: cyan;
}
.rtl u {padding-right: 3 em ; padding-left:0 ;}
s {
visibility:visible;
}
.t1 {width:10 em ;}
.t2 {width:14 em ;}
.t3 {width:13 .5 em ;}
.t3 u { padding-right:1 em ; }
.t3.rtl u {padding-left:1 em ; padding-right: 3 em ; }
.t4 {width:12 .5 em ;}
</style >
</head ><body >
<div class="test t2" >
CSS is awesome<u ></u ><br >
CSS is awesome<u > <s >x</s > </u >
</div >
<div class="test t1" >CSS is awesome<u ></u ><br ></div >
<div class="test t2" >CSS is awesome<u > <s >x</s > </u ></div >
<div class="test t3" >CSS is awesome<u > <s >x</s ></u ></div >
<div class="test t4" >CSS is awesome<u > <s >x</s ></u ></div >
<div class="rtl" >
<div class="test rtl rlo t2" >
CSS is awesome<u ></u ><br >
CSS is awesome<u > <s >x</s ></u >
</div >
<div class="test rtl rlo t1" >CSS is awesome<u ></u ><br ></div >
<div class="test rtl rlo t2" >CSS is awesome<u > <s >x</s > </u ></div >
<div class="test rtl rlo t3" >CSS is awesome<u > <s >x</s ></u ></div >
<div class="test rtl rlo t4" >CSS is awesome<u > <s >x</s ></u ></div >
</div >
</body ></html >
Messung V0.5 in Prozent C=98 H=93 G=95
¤ Dauer der Verarbeitung: 0.4 Sekunden
¤
*© Formatika GbR, Deutschland