在左侧使用 CSS 省略号截断字符串 [重复]

Question

这个问题在这里已经有了答案：

文本：从右到左 (CSS) (6 个回答)

2年前关闭。

我知道这听起来很奇怪，但我需要在字符串的左侧完成它：

https://css-tricks.com/snippets/css/truncate-string-with-ellipsis/

例如：而不是“你好...”我需要它是“...olleH”

有谁知道是否有办法做到这一点？ 提前致谢。

Answer 1

 .truncate_class { overflow: hidden; width: 60px; direction: rtl; margin-left: 15px; white-space: nowrap; } .truncate_class:after { position: absolute; left: 0px; content: "..."; }

 <p class="truncate_class">12154543554534351432123</p>

Answer 2

使用dir: rlt只会交换默认的从左到右的布局。
要向后翻转每个字母，您需要unicode-bidi属性。

 .toTruncate { direction: rtl; unicode-bidi: bidi-override; max-width: 50px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

 <p class="toTruncate">Hello John Doe</p>