two-value-syntax.html 1.8 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576
  1. <!DOCTYPE HTML>
  2. <!--
  3. Any copyright is dedicated to the Public Domain.
  4. http://creativecommons.org/licenses/publicdomain/
  5. Test: text-overflow:<left> <right>
  6. -->
  7. <html><head>
  8. <title>text-overflow: text-overflow:&lt;left&gt; &lt;right&gt;</title>
  9. <style type="text/css">
  10. @font-face {
  11. font-family: DejaVuSansMono;
  12. src: url(../fonts/DejaVuSansMono.woff);
  13. }
  14. html,body {
  15. color:black; background-color:white; font-size:16px; padding:0; margin:0; font-family:DejaVuSansMono;
  16. }
  17. .test {
  18. overflow:hidden;
  19. width:100%;
  20. white-space:nowrap;
  21. }
  22. span {
  23. margin: 0 -2px;
  24. }
  25. .rlo {
  26. unicode-bidi: bidi-override; direction:rtl;
  27. }
  28. .lro {
  29. unicode-bidi: bidi-override;
  30. }
  31. .rtl {
  32. direction:rtl;
  33. }
  34. .ltr {
  35. direction:ltr;
  36. }
  37. .t1 { text-overflow:ellipsis ellipsis; }
  38. .t2 { text-overflow:ellipsis clip; }
  39. .t3 { text-overflow:clip ellipsis; }
  40. .t4 { text-overflow:clip "."; }
  41. .t5 { text-overflow:"." clip; }
  42. .t6 { text-overflow:"." ","; }
  43. .t7 { text-overflow:ellipsis ","; }
  44. .t8 { text-overflow:"." ellipsis; }
  45. </style>
  46. </head><body>
  47. <div style="float:left;">
  48. |||||
  49. <div class="test t1"><span>||||||</span></div>
  50. <div class="test rtl t1"><span>||||||</span></div>
  51. <div class="test t2"><span>||||||</span></div>
  52. <div class="test rtl t2"><span>||||||</span></div>
  53. <div class="test t3"><span>||||||</span></div>
  54. <div class="test rtl t3"><span>||||||</span></div>
  55. <div class="test t4"><span>||||||</span></div>
  56. <div class="test rtl t4"><span>||||||</span></div>
  57. <div class="test t5"><span>||||||</span></div>
  58. <div class="test rtl t5"><span>||||||</span></div>
  59. <div class="test t6"><span>||||||</span></div>
  60. <div class="test rtl t6"><span>||||||</span></div>
  61. <div class="test t7"><span>||||||</span></div>
  62. <div class="test rtl t7"><span>||||||</span></div>
  63. <div class="test t8"><span>||||||</span></div>
  64. <div class="test rtl t8"><span>||||||</span></div>
  65. </div>
  66. </body>
  67. </html>