我有一条路径列表（由于缺少更好的词，也许面包屑痕迹可以更好地描述它们）。有些值太长而无法在其父项中显示，因此我正在使用text-overflow: ellipsis。问题在于重要信息在右侧，因此我希望省略号出现在左侧。像这样的ASCII艺术：----------------------------|first > second > third ||...second > third > fourth||...fifth > sixth > seventh|----------------------------请注意，第一行足够短，因此仍保持左对齐，而其他两行又太长，因此省略号出现在左侧。我更喜欢仅使用CSS的解决方案，但是如果无法避免，JS很好。如果该解决方案仅适用于Firefox和Chrome，则可以。编辑：在这一点上，我正在寻找解决Chrome中的错误的方法，这些错误会在文档混合了RTL和LTR时阻止其正确呈现。从一开始我就是真正需要的，我只是没有意识到。
3 回答
jeck猫
TA贡献1909条经验 获得超7个赞
这样的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>
泛舟湖上清波郎朗
TA贡献1818条经验 获得超3个赞
我终于不得不破解并用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>
添加回答
举报
0/150
提交
取消