如何在左侧显示文本溢出省略号？

左侧文本溢出省略号：

您可能会遇到这样的情况：路径列表或任何文本值超出了显示宽度。要解决此问题，您可能需要实现 text-overflow 属性来截断文本。然而，假设关键信息位于文本的末尾。在这种情况下，您希望省略号出现在左侧，确保最右侧的内容保持可见。

此问题的解决方案可以在提供的 JavaScript fiddle 中找到。这里，采用了方向、文本对齐和文本溢出属性的组合。值得注意的是，根据 MDN 文档，未来可能会提供使用溢出类型指定省略号定位在左侧的选项。但是，此功能仍被认为是实验性的。

1. 方向：此属性使用 Direction:rtl; 将文本方向调整为从右到左 (RTL)。
2. Text-align： text-align 属性将其父元素中的文本与left.
3. Text-overflow: text-overflow 属性设置为省略号。如果文本超出元素的宽度，这会有效地截断文本并显示省略号。

这里提供了用于进一步说明的 JS 小提琴：

JavaScript小提琴

CSS:

p {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 170px;
  border: 1px solid #999;
  direction: rtl;
  text-align: left;
}

HTML:

<p>
  first > second > third<br />
  second > third > fourth > fifth > sixth<br />
  fifth > sixth > seventh > eighth > ninth
</p>

以上是如何在左侧显示文本溢出省略号？的详细内容。更多信息请关注PHP中文网其他相关文章！