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

Question

简单地说，我有一个字段，其中最右边的数字是最重要的。 （当然，这个字段来自我们的附属公司的系统，基于他们的主键，所以最左边的数字每个时期只改变一次！）

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

（CSS3没问题。）

Answer 1

尝试使用这个技巧：

<强> HTML

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

<强> CSS

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

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

FIDDLE

Answer 2

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

direction: rtl;

将完成预期的结果。

Answer 3

您可以使用css类来执行以下行为：

.responsive-text {
  display: inline-block;
  vertical-align: middle;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  direction: rtl;
  width: 100%;
}

您只需要定义此文本容器的大小，并且每次内部文本只填写一行时，它将截断文本并添加{{1}在开头。

Answer 4

当我使用 def parse(self, response): for regione in response.xpath('//table[@id="panoramica"]/tbody/tr'): regione_name = regione.xpath('./th[@scope="rowgroup"]//text()').get() if not regione_name: continue for link in regione.xpath("./td/a"): yield response.follow(link, callback=self.parse_provincia, meta=...) 解决方法时，请注意编写 direction: rtl; 之类的内容会导致显示为 1 > 2 > 3 ！

解决方案是在 HTML 中的文本前添加 3 < 2 < 1，如果您使用 angular，则必须在 HTML 中的文本前添加 &ltr;。