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

我有一个HTML列表如下

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

一些文本
更多的文字
更多文本

因为您将其应用于

ul

，所以您应该向

li

申请，请参见以下内容：

ul{
列表样式类型：无；
保证金：0；
填充：0
}
李{
显示：内联块；
垂直对齐：顶部；
右边距：10px；
最大宽度：110px
}
李：最后一种{
文本溢出：省略号；
空白：nowrap；
溢出：隐藏；
}

一些文本
更多的文字
一些甚至更多的文本

Chrome的行为似乎不正确，Firefox和IE在第二个

li

之后添加省略号，这似乎是正确的行为：

对于省略号和字符串值，实现必须根据需要在行的适用边缘隐藏字符和原子内联级元素，以适应省略号/字符串。将省略号/字符串直接放置在剩余内联内容的适用边缘附近。行上的第一个字符或原子内联级元素必须剪裁，而不是省略

溢出省略号：“文本溢出”属性（）

内联块

元素被分类为原子内联级元素：

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

内联级别元素和内联框（）

根据第一段引语，整个

li

应该被像Firefox和IE这样的省略号所取代

为了在一系列浏览器中保持一致，请从

display:inline块更改
li
到
显示：内联


ul{
列表样式类型：无；
保证金：0；
填充：0；
宽度：250px；
文本溢出：省略号；
空白：nowrap；
溢出：隐藏
}
李{
显示：内联；
右边距：10px
}

一些文本
更多的文字
更多文本
当我将
设置为
显示：内联时，它工作了

for
文本溢出
声明它仅适用于块元素。我猜在
上使用
display:inline block
可以让它们拥有自己的块上下文，因此不再应用父级的
文本溢出
属性


ul{列表样式类型：无；边距：0；填充：0；宽度：250px；文本溢出：省略号；空白：nowrap；溢出：隐藏}
li{显示：内联；右边距：10px}

一些文本
更多的文字
更多文本
这将剪辑所有列表元素，而不仅仅是最后一个。谢谢-是的，我知道我可以剪辑每个单独的项目，这可能是解决问题的唯一方法，但我希望只剪辑最后一个。谢谢，这是一个很好的折衷方案。我会看看是否有人有更完整的内容，否则会将其标记为答案。我想这是正确的行为，而且仍然是Chrome中的一个bug。@maryisdead这是真的，尽管它至少显示了省略号。看起来浏览器处理这个特定实例的方式有所不同。是的，没错。Safari像Chrome一样处理它。再说一遍，IE的行为就像Firefox。我猜，这毕竟不是很好的定义。我正要对IE说同样的话。我想你可能是对的，这在某种程度上是由于
内联块
元素创建了一个新的块上下文，只是浏览器以不同的方式处理它。我建议这是公认的答案。比我的更完整，并解释了到底发生了什么。