我有一个长文本,不适合它占据的 div。div类如下:
.mydiv {
overflow:hidden;
padding:3px 3px 3px 5px;
white-space:nowrap;
}
当然,我只能看到部分文字。问题是它显示前 N 个字符,我想显示最后 N 个字符。如何使用 CSS 实现它?Text-align
在这里没有帮助。
我有一个长文本,不适合它占据的 div。div类如下:
.mydiv {
overflow:hidden;
padding:3px 3px 3px 5px;
white-space:nowrap;
}
当然,我只能看到部分文字。问题是它显示前 N 个字符,我想显示最后 N 个字符。如何使用 CSS 实现它?Text-align
在这里没有帮助。
如果您能够将文本包装在另一个元素中,则可以使其工作,如此 fiddle所示。我<span>
在右边浮动了一个嵌套。
<div class="wrap">
<div class="window">Lots of text</div>
</div>
.wrap { overflow: hidden; position: relative; }
.window { position: absolute; right: 0px; }
你可以只用 CSS 来做到这一点:
<div style="width: 150px; border: 1px solid red; overflow: hidden; position: relative; height: 2em;">
<div style="position: absolute; right: 0px; padding: .5em;white-space:nowrap;">
aaaaaaaaaaaabbbbbbbbbcccccccccccccccccddddddddddddddddddddeeeeeeeeeeeeeeeeeeeeffffffffffffffffffffgggggggggggggggggggghhhhhhhhhhhhhhhhiiiiiiiiiiiii
</div>
</div>
(在 Firefox 中测试。YMMV)
您必须使用 javascript 将 div 一直滚动到右侧,尝试:
var obj = document.getElementById("div-id");
obj.scrollLeft = obj.scrollWidth - obj.clientWidth