25

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

每个人都知道 CSS 提供了一种带有“text-overflow: ellipsis;”的 RIGHT 截断。我们如何（不向服务器添加代码以通过字符串手术准备该字段）截断左侧的字段，并将“...”省略号放在左侧？

（CSS3 没问题。）

4

4 回答 4

25

尝试使用这个技巧：

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: "...";
}​

小提琴

于 2012-10-06T17:54:55.897 回答
10

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

direction: rtl;

会做预期的结果。

从左到右溢出

于 2012-10-06T16:58:36.843 回答
1

您可以使用 css 类来实现这种行为，例如：

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

您只需要定义此文本容器的大小，并且每次里面的文本不只填充一行时，它将截断文本并...在开头添加。

于 2018-02-14T13:21:49.073 回答
0

当我使用direction: rtl;workaroud时，请注意编写类似的1 > 2 > 3内容会导致显示为3 < 2 < 1！

解决方案是&ltr;在 HTML 中的文本之前添加，如果您使用 Angular，则必须&#x200E在 HTML 中的文本之前添加。

于 2021-04-07T12:41:26.173 回答