如何使用CSS实现单行固定宽度文本显示末尾并截断开头？

嘿，这个需求很常见，我来给你两个简单的解决方案！

你之前的代码之所以只显示开头、截断末尾，是因为默认文本是左对齐的，overflow: hidden会把超出容器右侧的内容（也就是文本末尾）给隐藏掉。要反过来截断开头、保留末尾，我们可以用下面两种CSS方法：

方法一：Flex布局（推荐，不影响文本阅读顺序） #

直接修改你的CSS，给容器加上flex布局并让内容靠右对齐：

.demo {
  border: 1px solid red;
  white-space: nowrap;
  max-width: 100px;
  overflow: hidden;
  display: flex;
  justify-content: flex-end; /* 把文本推到容器右侧 */
}

这样文本会紧贴容器右侧显示，超出容器左侧的部分会被自动隐藏，完美实现“展示末尾、截断开头”的效果，而且完全不会改变文本的正常阅读顺序。

方法二：带省略号的截断（适合需要提示用户内容被截断的场景） #

如果你还想在被截断的开头位置加上省略号，可以用文本方向属性配合text-overflow：

.demo {
  border: 1px solid red;
  white-space: nowrap;
  max-width: 100px;
  overflow: hidden;
  direction: rtl; /* 反转文本排列方向 */
  text-overflow: ellipsis; /* 在截断处添加省略号 */
  unicode-bidi: plaintext; /* 保持文本正常阅读顺序，避免单词反转 */
}

这里的unicode-bidi: plaintext很重要，它能确保即使设置了direction: rtl，你的英文文本还是按照正常的从左到右顺序阅读，不会出现单词颠倒的问题。

你的HTML代码不需要做任何修改，还是用原来的：

<p class="demo">hello this is a string</p>

内容的提问来源于stack exchange，提问作者Jake