|
1 | 1 | <style> |
2 | 2 | dt[style*="cursor"] * { cursor: inherit; } |
3 | 3 | </style> |
4 | | -<style>#awesome-table td {padding:5px}</style> |
| 4 | +<style> |
| 5 | +.awesome-table td {padding:5px} |
| 6 | +.awesome-table {color:#000;background:#fff;margin: auto;} |
| 7 | +</style> |
5 | 8 |
|
6 | 9 | <pre class='metadata'> |
7 | 10 | Title: CSS Basic User Interface Module Level 3 (CSS3 UI) |
@@ -683,6 +686,35 @@ atomic inline-level element</a> |
683 | 686 | on a line |
684 | 687 | must be clipped rather than ellipsed. |
685 | 688 |
|
| 689 | +<div class=example> |
| 690 | +<h4 id="bidi-ellipsis" class="no-num no-toc">Bidi ellipsis examples</h4> |
| 691 | +These examples demonstrate which characters get hidden |
| 692 | +to make room for the ellipsis in a bidi situation: |
| 693 | +those visually at the end edge of the line. |
| 694 | + |
| 695 | +Sample CSS: |
| 696 | +<pre><code highlight=css> |
| 697 | +div { |
| 698 | + font-family: monospace; |
| 699 | + white-space: pre; |
| 700 | + overflow: hidden; |
| 701 | + width: 9ch; |
| 702 | + text-overflow: ellipsis; |
| 703 | +} |
| 704 | +</code></pre> |
| 705 | + |
| 706 | +Sample HTML fragments, renderings, and your browser: |
| 707 | +<table class="awesome-table data"> |
| 708 | +<thead><th>HTML<th>Reference rendering<th>Your Browser</thead> |
| 709 | +<tr> |
| 710 | +<td><code highlight=html><div>שלום 123456</div></code><td><div style="font-family:monospace">123456 ם…</div><td><div style="font-family: monospace; white-space: pre; overflow: hidden; width: 9ch; text-overflow: ellipsis">שלום 123456</div> |
| 711 | +<tr><td><code highlight=html><div dir=rtl>שלום 123456</div></code><td><div style="font-family:monospace">…456 שלום</div><td><div style="font-family: monospace; white-space: pre; overflow: hidden; width: 9ch; text-overflow: ellipsis" dir=rtl>שלום 123456</div> |
| 712 | + |
| 713 | +</table> |
| 714 | + |
| 715 | + |
| 716 | +</div> |
| 717 | + |
686 | 718 | <h4 id="ellipsing-details" class="no-num no-toc">ellipsing details</h4> |
687 | 719 | <ul> |
688 | 720 | <li> |
@@ -728,7 +760,7 @@ sample CSS for a div: |
728 | 760 | }</code></pre> |
729 | 761 |
|
730 | 762 | sample HTML fragments, renderings, and your browser: |
731 | | -<table style="color:#000;background:#fff" id="awesome-table"><tbody> |
| 763 | +<table class="awesome-table"><tbody> |
732 | 764 | <tr><th>HTML</th><th>sample rendering</th><th>your browser</th></tr> |
733 | 765 | <tr> |
734 | 766 | <td><pre><code class="lang-markup"><div> |
|
0 commit comments