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

简单地说，我有一个字段，其中最右边的数字是最重要的。（当然，该字段来自我们的分支机构的系统，基于它们的主键，因此最左边的数字每个历元只更改一次！）

每个人都知道CSS使用“文本溢出：省略号；”提供了正确的截断。如何（在不向服务器添加代码以通过字符串操作准备该字段的情况下）截断左侧的字段，并将“…”省略号放在左侧

---

（CSS3没问题。）

我现在无法测试它，但我非常确定

direction: rtl;

会达到预期的效果

尝试使用以下技巧：

HTML

ert3452654546

CSS

。省略号{
溢出：隐藏；
宽度：60px；
方向：rtl；
左边距：15px；
空白：nowrap；
}
.省略号：之后{
位置：绝对位置；
左：0px；
内容：“…”；
}​

---

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

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

---

您只需定义此文本容器的大小，每次内部的文本没有只填充一行时，它将截断文本并在开头添加

…

。

因为我使用的是

方向：rtl解决方法，注意编写类似
1>2>3
的内容将导致显示为
3<2<1

解决方案是添加
<r在HTML文本之前，如果你使用angular，你必须在HTML文本之前添加
‎
。
相关：我添加了一个提琴来说明问题，并提出了一个非常粗俗的解决方案：这种边缘情况是Firefox开发者拒绝在FFv7之前实现省略号的原因，尽管他们为此受到了很多指责。他们最终实现了它，但是规范的边缘有很多洞。如果你做的事情远不止基本的。。。在框的末尾，您会发现它的问题。请参阅，以获取仅CSS的解决方案，我的答案位于。它确实将省略号放在了左侧，但是，Chrome中似乎存在一个缺陷，省略号只是在文本的前面，但您仍然看到文本的左边缘（开始）而不是结尾。看小提琴：@RyanWheale，现在发生在IE。。。但是不再在Chrome中使用
的父元素：在
元素之后需要有
位置：相对的
或
绝对的
。否则您将得到以下结果：不需要在
伪元素之后使用
。您可以在
之后添加
文本溢出：省略号
，而不是
：：。点将出现在左侧，因为
方向是
rtl
。请注意，如果您的字符串存在字母和非字母字符混合的问题（例如，您正试图截断
***********1234
，这样您仍然可以看到
1234
，但RTL使其出现在字符串的开头，并且仍然被截断），在{content:'\\200E'}
之前添加
，以使元素RTL而不是内容LTR。（或将
<r；
添加到HTML内容的开头。）这个答案令人困惑。听起来你在警告用户，使用
方向：rtl
将…导致文本从右向左写入？这正是属性的设计目的。这似乎更适合作为Tchoupi答案下的注释，而不是答案本身。@TylerH但人们正在使用定位以将文本向左对齐…因此，在使用数字而不是字符串之前，您无法看到差异！