如何截断水平 ul 列表中最后一项的文本

Question

我有一个 HTML 列表如下...

<ul>
    <li>Some text</li>
    <li>Some more text</li>
    <li>Even more text</li>
</ul>

...我正在使用 display: inline-block; 将列表项保持在一条水平线上。

ul 的 width 是有限的，我想在最后一项不适合 width 时使用省略号截断它。

所以需要看起来像：

Some text Some more text Even mo...

我试过在 ul 上使用 text-overflow: ellipsis;，但没有效果。

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 250px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden
}
li {
  display: inline-block;
  margin-right: 10px
}

<ul>
  <li>Some text</li>
  <li>Some more text</li>
  <li>Even more text</li>
</ul>

这是一个fiddle

Answer 1

因为您将它应用到 ul 而不是您应该应用到 li，见下文：

ul {
  list-style-type: none;
  margin: 0;
  padding: 0
}
li {
  display: inline-block;
  vertical-align:top;
  margin-right: 10px;
  max-width: 110px
}
li:last-of-type {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

<ul>
  <li>Some text</li>
  <li>Some more text</li>
  <li>Some even more text</li>
</ul>

Answer 2

似乎 Chrome 的行为不正确，Firefox 和 IE 在第二个 li 之后添加了省略号，这似乎是正确的行为：

For the ellipsis and string values, implementations must hide characters and atomic inline-level elements at the applicable edge(s) of the line as necessary to fit the ellipsis/string. Place the ellipsis/string immediately adjacent to the applicable edge(s) of the remaining inline content. The first character or atomic inline-level element on a line must be clipped rather than ellipsed.

溢出省略号：‘文本溢出’属性 (http://www.w3.org/TR/2012/WD-css3-ui-20120117/#text-overflow0)

inline-block 元素被归类为原子内联级元素：

Inline-level boxes that are not inline boxes (such as replaced inline-level elements, inline-block elements, and inline-table elements) are called atomic inline-level boxes because they participate in their inline formatting context as a single opaque box.

内联级元素和内联框(http://www.w3.org/TR/CSS21/visuren.html#inline-boxes)

根据第一条引述，整个 li 应该像 Firefox 和 IE 那样用省略号代替。

要使此功能在各种浏览器中一致地工作，请将 li 从 display: inline-block; 更改为 display: inline;。

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 250px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden
}
li {
  display: inline;
  margin-right: 10px
}

<ul>
  <li>Some text</li>
  <li>Some more text</li>
  <li>Even more text</li>
</ul>

Answer 3

我知道了将 <li> 设置为 display: inline.

时工作

text-overflow 的 specification 声明它仅适用于块元素。我想在 <li> 上设置 display: inline-block 让他们拥有自己的块上下文，因此不再应用父级的 text-overflow 属性。

ul {
  list-style-type: none;
  margin: 0;
  overflow: hidden;
  padding: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 250px;
}

li {
  display: inline;
  margin-right: 10px
}

<ul>
  <li>Some text</li>
  <li>Some more text</li>
  <li>Even more text</li>
</ul>

JSFiddle

如何截断水平 ul 列表中最后一项的文本

How to truncate text of last item in horizontal ul list

html

css

html-lists