左侧文本溢出省略号
我有一条路径列表（由于缺少更好的词，也许面包屑痕迹可以更好地描述它们）。有些值太长而无法在其父项中显示，因此我正在使用text-overflow: ellipsis。问题在于重要信息在右侧，因此我希望省略号出现在左侧。像这样的ASCII艺术：
----------------------------
|first > second > third |
|...second > third > fourth|
|...fifth > sixth > seventh|
----------------------------
请注意，第一行足够短，因此仍保持左对齐，而其他两行又太长，因此省略号出现在左侧。
我更喜欢仅使用CSS的解决方案，但是如果无法避免，JS很好。如果该解决方案仅适用于Firefox和Chrome，则可以。
编辑：在这一点上，我正在寻找解决Chrome中的错误的方法，这些错误会在文档混合了RTL和LTR时阻止其正确呈现。从一开始我就是真正需要的，我只是没有意识到。
ABOUTYOU浏览 461回答 3
3回答
-
jeck猫
这样的jsFiddle怎么样？它使用方向，文本对齐和文本溢出来获得左侧的省略号。根据MDN的说法，将来可能会用该left-overflow-type值指定左侧的省略号，但仍被认为是实验性的。p { white-space: nowrap; overflow: hidden; /* "overflow" value must be different from "visible" */ text-overflow: ellipsis; width: 170px; border: 1px solid #999; direction: rtl; text-align: left;}<p>first > second > third<br /> second > third > fourth > fifth > sixth<br /> fifth > sixth > seventh > eighth > ninth</p> -
泛舟湖上清波郎朗
我终于不得不破解并用JavaScript做一些事情。我希望有人会提出一个冰雹般的CSS解决方案，但人们似乎只是在投票赞成如果不是Chrome错误的话应该是正确的答案。j08691可以因他的工作而赏金。<html> <head> <style> #container { width: 200px; border: 1px solid blue; } #container div { width: 100%; overflow: hidden; white-space: nowrap; } </style> <script> function trimRows() { var rows = document.getElementById('container').childNodes; for (var i=0, row; row = rows[i]; i++) { if (row.scrollWidth > row.offsetWidth) { var textNode = row.firstChild; var value = '...' + textNode.nodeValue; do { value = '...' + value.substr(4); textNode.nodeValue = value; } while (row.scrollWidth > row.offsetWidth); } } } </script> </head> <body onload='trimRows();'> <div id="container" > <div>first > second > third</div> <div>second > third > fourth > fifth > sixth</div> <div>fifth > sixth > seventh > eighth > ninth</div> </div> </body></html>
随时随地看视频慕课网APP
Html/CSS
JavaScript