block-padding.html (2342B)
1 <!DOCTYPE HTML> 2 <!-- 3 Any copyright is dedicated to the Public Domain. 4 http://creativecommons.org/licenses/publicdomain/ 5 6 Test: test marker trigger point and alignment in a block with padding 7 --> 8 <!DOCTYPE HTML> 9 <html><head> 10 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 11 <title>text-overflow: text-overflow block padding </title> 12 <style type="text/css"> 13 @font-face { 14 font-family: DejaVuSansMono; 15 src: url(../fonts/DejaVuSansMono.woff); 16 } 17 html,body { 18 color:black; background-color:white; font-size:16px; padding:0; margin:0; font-family:DejaVuSansMono; text-decoration-skip-ink: none; 19 } 20 body { width:24ch; overflow:hidden; } 21 22 .test { 23 overflow: hidden; 24 white-space: nowrap; 25 text-overflow: ellipsis; 26 text-decoration: line-through; 27 padding-left: 1ch; 28 padding-right: 3ch; 29 height: 3em; 30 margin-bottom:1em; 31 } 32 .s { 33 overflow: auto; 34 } 35 span { 36 text-decoration: underline overline; 37 background:yellow; 38 } 39 .rtl { 40 direction:rtl; 41 } 42 .ltr { 43 direction:ltr; 44 } 45 .rlo span { 46 unicode-bidi: bidi-override; direction: rtl; 47 } 48 .lro span { 49 unicode-bidi: bidi-override; direction: ltr; 50 } 51 </style> 52 53 </head><body> 54 55 <!-- LTR / LTR --> 56 <div class="test ltr" ><span>| | | | | | | | | | | | | </span></div> 57 <div class="test ltr s"><span>| | | | | | | | | | | | | </span></div> 58 59 <!-- RTL / LTR --> 60 <div class="test rtl" ><span>| | | | | | | | | | | | | </span></div> 61 <div class="test rtl s"><span>| | | | | | | | | | | | | </span></div> 62 63 <!-- LTR / RTL --> 64 <div class="test ltr rlo" ><span>| | | | | | | | | | | | | </span></div> 65 <div class="test ltr rlo s"><span>| | | | | | | | | | | | | </span></div> 66 67 <!-- RTL / RTL --> 68 <div class="test rtl rlo" ><span>| | | | | | | | | | | | | </span></div> 69 <div class="test rtl rlo s"><span>| | | | | | | | | | | | | </span></div> 70 71 </body></html>