Hem*_*ock 58 html javascript css css3
我有一个路径列表(缺少一个更好的词,也许面包屑路径描述更好).有些值太长而无法显示在父级中,所以我正在使用它们text-overflow: ellipsis.问题是重要信息在右边,所以我想要省略号出现在左边.像这样的ascii艺术:
----------------------------
|first > second > third |
|...second > third > fourth|
|...fifth > sixth > seventh|
----------------------------
请注意,第一行足够短,因此它保持左对齐,但其他两行太长,因此省略号显示在左侧.
我更喜欢只有CSS的解决方案,但如果无法避免,JS就可以了.如果该解决方案仅适用于Firefox和Chrome,则可以.
编辑:此时我正在寻找解决Chrome中的错误的方法,以防止文档混合使用RTL和LTR时正确呈现.这就是我从一开始就真正需要的,我只是没有意识到这一点.
j08*_*691 75
怎么样这样的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>?Hem*_*ock 14
我终于不得不破解并用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>
这有点问题，但也许是正确方向的一点
http://jsfiddle.net/HerrSerker/ZfbaD/50/
$('.container')
.animate({'width': 450}, 4000)
.animate({'width': 100}, 4000)
.animate({'width': 170}, 4000).container {
white-space: nowrap;
overflow: hidden; /* "overflow" value must be different from "visible" */
text-overflow: ellipsis;
width:170px;
border:1px solid #999;
direction:rtl;
}
.container .part {
direction:ltr;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<span class="part">second</span>
<span class="part">></span>
<span class="part">third</span>
<span class="part">></span>
<span class="part">fourth</span>
<span class="part">></span>
<span class="part">fifth</span>
<span class="part">></span>
<span class="part">sixth</span>
</div>仅使用 CSS 的跨浏览器解决方案。它需要反转文本（通过服务器或使用 JavaScript），然后通过 CSS 将每个字符翻转为其镜像，然后将整个文本翻转为其镜像。步骤的可视化如下：
eman.elif/gnol/yrev/a/ot/htap/（向后文字）eman.elif/gnol/yrev/...（添加省略号）.../very/long/file.name（全文翻转）p {
max-width: 180px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
transform: rotateY(180deg);
}
span {
display: inline-block;
transform: rotateY(180deg);
}<p><span>e</span><span>m</span><span>a</span><span>n</span><span>.</span><span>e</span><span>l</span><span>i</span><span>f</span><span>/</span><span>g</span><span>n</span><span>o</span><span>l</span><span>/</span><span>y</span><span>r</span><span>e</span><span>v</span><span>/</span><span>a</span><span>/</span><span>o</span><span>t</span><span>/</span><span>h</span><span>t</span><span>a</span><span>p</span><span>/</span></p>以下解决方案rtl在解决错误解释前面或后面的弱或中性BiDi 字符（例如/、\、~、.等（基本上是任何标点符号或特殊字符））时使用。
使用以下组合：
direction：rtl<runicode-bidi：bidi-overridep {
direction: rtl;
max-width: 180px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap; /* or pre (e.g. preserve multiple spaces) */
}
span {
direction: ltr;
unicode-bidi: bidi-override; /* or isolate, isolate-override, embed */
}<p><span>/path/to/a/very/long/file.name</span></p>另一种可能性是使用<bdo>双向文本覆盖元素：
p {
max-width: 180px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap; /* or pre (e.g. preserve multiple spaces) */
}<bdo dir="rtl">
<p>
<bdo dir="ltr">/path/to/a/very/long/file.name</bdo>
</p>
</bdo>| 归档时间： |
|
| 查看次数： |
26176 次 |
| 最近记录： |