左侧的文本溢出省略号 [英] Text-overflow ellipsis on left side
问题描述
我有一个路径列表（因为缺少一个更好的词，也许面包屑轨迹更好地描述它们）。某些值太长，无法在其父级中显示，因此我使用 text-overflow：ellipsis 。问题是，重要的信息在右边，所以我想省略号出现在左边。类似这样的ascii艺术：
I have a list of paths (for lack of a better word, maybe bread crumb trails describes them better). Some of the values are too long to display in their parent so I'm using text-overflow: ellipsis. The problem is that the important information is on the right, so I'd like the ellipsis to appear on the left. Something like this this ascii art:
----------------------------
|first > second > third |
|...second > third > fourth|
|...fifth > sixth > seventh|
----------------------------
请注意，第一行足够短，因此它保持左对齐，但其他两行太长，所以省略号出现在左侧。
Notice that the first row is short enough so it remains left aligned, but the other two are too long so the ellipsis appears on the left hand side.
我更喜欢CSS的解决方案，但JS是好的，如果它不能避免。
I'd prefer a CSS only solution, but JS is fine if it can't be avoided. It's ok if the solution only works in Firefox and Chrome.
编辑：此时，我正在寻找一个解决Chrome中的错误的工作，以防止它在文档混合时无法正确呈现RTL和LTR。
推荐答案
我终于有了在JavaScript中破解和做某事。我希望有人能想出一个冰雹的CSS解决方案，但人们似乎只是对投票的答案，如果不是Chrome的bug，应该是正确的。 j08691可以为他的工作提供赏金。
I finally had to crack and do something in JavaScript. I was hoping that someone would come up with a hail-mary CSS solution but people seem to just be up-voting the answer that should be correct if it weren't for the Chrome bugs. j08691 can have the bounty for his work.
<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>
这篇关于左侧的文本溢出省略号的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
