如何在Safari中实现左侧文本溢出省略？

左侧文本溢出省略号

使用长路径列表时，在确保完整显示它们的同时，可能会遇到困难右侧的重要信息仍然可见。为了解决这个问题，您可能希望实现左侧文本溢出省略号，这会截断路径的开头，同时保留其结尾。

与 Firefox 和 Chrome 等浏览器不同，Safari 目前缺乏对此功能的支持单独使用CSS。但是，可以使用 CSS 属性的组合作为解决方法。

CSS 解决方案：

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

说明：

• white-space：nowrap 防止文本换行到多个行。
• overflow：隐藏隐藏文本溢出部分。
• text-overflow：省略号在文本超出可用宽度时触发添加省略号。
• width 指定路径容器的最大宽度。
• direction：rtl 强制文本方向从右到左。
• 文本对齐：左对齐文本到容器的左侧，有效地将省略号放在左侧。

示例：

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

此 CSS 解决方法实现了显示左侧文本溢出的预期效果省略号，确保即使对于很长的路径，右侧的关键信息仍然可见。

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