左侧文本溢出省略号
我有一条路径列表（由于缺少更好的词，也许面包屑痕迹可以更好地描述它们）。有些值太长而无法在其父项中显示，因此我正在使用text-overflow: ellipsis。问题在于重要信息在右侧，因此我希望省略号出现在左侧。像这样的ASCII艺术：
----------------------------
|first > second > third |
|...second > third > fourth|
|...fifth > sixth > seventh|
----------------------------
请注意，第一行足够短，因此仍保持左对齐，而其他两行又太长，因此省略号出现在左侧。
我更喜欢仅CSS的解决方案，但是如果无法避免，JS很好。如果该解决方案仅适用于Firefox和Chrome，则可以。
编辑： 在这一点上，我正在寻找解决Chrome中的错误的方法，这些错误会在文档混合了RTL和LTR时阻止其正确呈现。
从一开始我就是真正需要的，我只是没有意识到。
问题答案：
我终于不得不破解并用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>
-
问题内容： 我在页面上有一个块元素集合。它们都设置了CSS规则的空白，溢出，文本溢出，以便修剪掉溢出的文本并使用省略号。 但是，并非所有元素都会溢出。 无论如何，我可以使用JavaScript来检测哪些元素正在溢出吗？ 谢谢。 补充：我正在使用的示例HTML结构。 SPAN元素始终适合单元格，它们应用了省略号规则。我想检测何时将省略号应用于SPAN的文本内容。 问题答案： 很久以前，我需要这样做，
-
我不知道为什么这个简单的CSS不起作用... null null 应该在第4次“测试”前后切断
-
我正在寻找一种在文本中添加省略号的方法，当它超过一定数量的行。我不想使用一个插件，我从另一个答案中找到了一个纯JS代码。但是，省略号“……”应用于每一个元素，即使它没有通过数字的限制。 HTML： CSS： ！！我添加了两倍于行高的高度，以使超过两行的文本溢出。如果我想要三条线，我放三倍的线高。 JS： 使用“之前”和“之后”的示例进行编辑： 前：Lorem ipsum dolor sit ame
-
我无法让工作，我希望有人能发现我找不到的错误。这是我的代码： HTML： CSS： JSFIDLE（JSIDLE）：http://jsfiddle.net/59m5e6ex/ 我找到了这个，但据我所知，我的满足了所有要求。
-
问题内容： 我正在固定一个下拉框的宽度（是的，我知道这样做存在跨浏览器问题）。 有没有一种非js的方法来切断溢出的文本并附加省略号？text-overflow：省略号不适用于元素（至少在Chrome中）。 问题答案： HTML在表单控件中指定的内容非常有限。这就为操作系统和浏览器制造商留下了做他们认为合适的空间（例如，iPhone的模式，当打开时，它看起来与传统的弹出菜单完全不同）。 看起来大多数
-
问题内容： 我知道您可以使用CSS规则组合来在溢出时（不超出父级的范围）使文本以省略号（…）结尾。 是否有可能（随意说，不）达到相同的效果，但让文本换行超过一行？ 如您所见，当文本的宽度大于div的宽度时，文本以省略号结尾。但是，仍然有足够的空间用于文本换行并继续。这会被中断，以使省略号起作用。 有任何想法吗？ PS：没有JS解决方案，如果可能的话，使用纯CSS。 问题答案： 我不确定您是否看过