table-cell.html 1.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748
  1. <!DOCTYPE HTML>
  2. <!--
  3. Any copyright is dedicated to the Public Domain.
  4. http://creativecommons.org/licenses/publicdomain/
  5. Test: text-overflow:ellipsis on table-cell
  6. -->
  7. <html><head>
  8. <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  9. <title>Test text-overflow:ellipsis on table-cell</title>
  10. <style type="text/css">
  11. @font-face {
  12. font-family: DejaVuSansMono;
  13. src: url(../fonts/DejaVuSansMono.woff);
  14. }
  15. html,body {
  16. color:black; background-color:white; font-size:16px; padding:0; margin:0; font-family:DejaVuSansMono;
  17. }
  18. .table {
  19. color: black;
  20. display: table;
  21. table-layout: fixed;
  22. height: 5em;
  23. width: 5em;
  24. }
  25. .row {
  26. display: table-row;
  27. }
  28. .cell {
  29. display: table-cell;
  30. white-space: nowrap;
  31. overflow: hidden;
  32. text-overflow: ellipsis;
  33. }
  34. </style>
  35. </head>
  36. <body>
  37. <div class="table">
  38. <div class="row">
  39. <div class="cell">||||||||||||||</div>
  40. </div>
  41. <div class="row">
  42. <div class="cell"><span>||||||||||||||</span></div>
  43. </div>
  44. </div>
  45. </body></html>