Question

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

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

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

ul＆＃39; width是有限制的，我想使用省略号截断最后一项，因为它不适合width。

所以需要看起来像：

Some text Some more text Even mo...

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

＆＃13;

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
}

＆＃13;

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

＆＃13;

这里是fiddle

Answer 1

我将<li>设置为display: inline。

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

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>

JSFiddle

Answer 2

因为您将其应用于ul而是应该应用于li，请参阅下文：

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Answer 3

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

对于省略号和字符串值，实现必须在行的适用边缘隐藏字符和原子内联级元素，以适应省略号/字符串。将省略号/字符串放在紧邻其余内联内容的适用边缘的位置。必须剪切线上的第一个字符或原子内联级元素而不是省略。

溢出省略号：'text-overflow'属性（http://www.w3.org/TR/2012/WD-css3-ui-20120117/#text-overflow0）

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

非内联框的内联级框（例如替换的内联级元素，内联块元素和内联表元素）称为原子内联级框，因为它们作为单个参与其内联格式化上下文不透明的盒子。

内联级元素和内联框（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>

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

3 个答案: