我需要一个从左边截断的溢出,带有椭圆

Question

我需要一个从左边截断的溢出,带有椭圆

Phl*_*lip 24 css css3

简而言之,我有一个字段,其中最右边的数字是最重要的.(当然,这个领域来自我们的附属公司的系统,基于他们的主键,所以最左边的数字每个时期只改变一次!)

每个人都知道CSS提供了一个右截断"text-overflow:ellipsis;".如何(没有向服务器添加代码以通过字符串手术准备该字段)我们是否截断LEFT上的字段,并将"..."elipses放在LEFT上？

(CSS3没问题.)

Answer 1

小智 24

尝试使用这个技巧:

HTML

<p class="ellipsis">ert3452654546</p>

Run Code Online (Sandbox Code Playgroud)

CSS

.ellipsis {
    overflow: hidden;
    width: 60px;
    direction: rtl; 
    margin-left: 15px;
    white-space: nowrap;
}

.ellipsis:after {
    position: absolute;
    left: 0px;
    content: "...";
}?

Run Code Online (Sandbox Code Playgroud)

小提琴

请注意，如果您的字符串混合字母和非字母字符时遇到问题（例如，您尝试截断 `**** **** **** 1234`，以便您仍然可以看到`1234` 但 RTL 让它出现在字符串的开头，但仍然会被截断），在 { content: '\\200E' }` 之前添加 `:before { content: '\\200E' }` 以使 *element* RTL 但再次成为 *content* LTR。（或者将 `<` 添加到 HTML 内容的开头。） (2认同)

Answer 2

Tch*_*upi 9

我现在无法测试它,但我很确定添加

direction: rtl;

Run Code Online (Sandbox Code Playgroud)

会做出预期的结果.

它确实将省略号放在左侧,但是,Chrome中似乎存在一个错误,其中省略号只是前置于文本中,但您仍然看到文本的左边缘(开头)而不是结尾.见小提琴:http://jsfiddle.net/ryanwheale/2cyVX/ (2认同)

归档时间：	13 年，2 月前
查看次数：	7667 次
最近记录：	6 年，9 月前