javascript - 左侧的文本溢出省略号

Question

我有一个路径列表(由于缺少更好的词，也许面包屑路径更能描述它们)。有些值太长而无法在其父项中显示，因此我使用了 text-overflow: ellipsis。问题是重要信息在右边，所以我希望省略号出现在左边。像这样的 ascii 艺术:

----------------------------
|first > second > third    |
|...second > third > fourth|
|...fifth > sixth > seventh|
----------------------------

请注意，第一行足够短，因此它保持左对齐，但其他两行太长，因此省略号出现在左侧。

我更喜欢纯 CSS 解决方案，但如果无法避免，JS 也可以。如果该解决方案仅适用于 Firefox 和 Chrome，那也没关系。

编辑:此时，我正在寻找解决 Chrome 中的错误的方法，这些错误会在文档混合 RTL 和 LTR 时阻止它正确呈现。这就是我从一开始真正需要的，我只是没有意识到。

Answer 1

像这样的怎么样 jsFiddle ？它使用方向、文本对齐和文本溢出来获得左侧的省略号。根据MDN ，将来可能会使用 left-overflow-type 值指定左侧的省略号，但它仍被认为是实验性的。

p {
  white-space: nowrap;
  overflow: hidden;
  /* "overflow" value must be different from "visible" */
  text-overflow: ellipsis;
  width: 170px;
  border: 1px solid #999;
  direction: rtl;
  text-align: left;
}

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