如何让TD显示最右侧内容而非最左侧内容？

云原生阿岚

2026-8-6

解决TD元素overflow时显示右侧内容的方法

要让TD在overflow-x:hidden状态下显示内容的右侧部分（比如示例中的"UVWXYZ"），可以通过以下两种方式实现：

方法一：利用文本方向属性
给TD添加direction: rtl和unicode-bidi: bidi-override样式，配合必要的white-space: nowrap（确保内容不换行，overflow生效），代码如下：
```
td {
  text-align: right;
  overflow-x: hidden;
  white-space: nowrap;
  direction: rtl;
  unicode-bidi: bidi-override;
}
```
这个方法会强制文本从右向左排列，同时避免字符顺序反转，最终超出部分从左侧隐藏，显示最右侧的6个字符。
方法二：使用Flex布局
将TD设置为flex容器，通过justify-content: flex-end让内容靠右对齐，同样需要white-space: nowrap保证内容不换行，代码如下：
```
td {
  display: flex;
  justify-content: flex-end;
  overflow-x: hidden;
  white-space: nowrap;
}
```
Flex布局会自动将内容推到容器右侧，超出容器宽度的左侧内容会被隐藏，达到显示右侧内容的效果。