用左侧的 CSS 省略号截断字符串 [重复]答案

【问题标题】：Truncate String with CSS Ellipsis in the Left Side [duplicate]用左侧的 CSS 省略号截断字符串 [重复]
【发布时间】：2018-10-18 20:26:56
【问题描述】：

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

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

例如：我需要用“...olleH”代替“Hello...”

有人知道有没有办法做到这一点？提前致谢。

【问题讨论】：

你试过用{方向：rtl; } CSS 属性。

标签： html css

【解决方案1】：

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

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

&lt;p class="truncate_class"&gt;12154543554534351432123&lt;/p&gt;

【讨论】：

感谢您提供此代码 sn-p，它可能会提供一些有限的即时帮助。 proper explanation 将通过展示为什么这是解决问题的好方法，并使其对有其他类似问题的未来读者更有用，从而大大提高其长期价值。请edit您的回答添加一些解释，包括您所做的假设。
我的英雄！谢谢！
这个方法会输出...Hello，而不是你问的...olleH。

【解决方案2】：

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

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

&lt;p class="toTruncate"&gt;Hello John Doe&lt;/p&gt;

【讨论】：