如何检测 html 列表中的自动换行符并更改文本内容以避免换行符？

Question

我有一个以文本作为条目的列表。最小化屏幕时有一些自动换行符，以便文本仍然适合行。但是，我希望所有行都具有相同的大小，因此不希望有任何换行符。例如它会尽可能显示文本内容，然后添加三个点，这样就没有换行符。下面是一个例子。第一行是当文本内容太长时会发生什么，第二行是我希望它在这种情况下的样子。

咖啡咖啡咖啡咖啡咖啡咖啡咖啡咖啡咖啡咖啡咖啡咖啡咖啡咖啡咖啡咖啡咖啡咖啡咖啡咖啡咖啡咖啡
咖啡咖啡咖啡咖啡咖啡咖啡咖啡咖啡咖啡咖啡咖啡咖啡咖啡咖啡咖啡咖啡咖啡...
牛奶

如果你知道如何提供帮助，我会很高兴。

Answer 1

尝试text-overflow属性如下

<p class="abc">huy nguyen huy nguyen huy nguyen nguyen huy nguyen hen huy nguyen huy nguyen nguyen huy nguyen hen huy nguyen huy nguyen nguyen huy nguyen hen huy nguyen huy nguyen nguyen huy nguyen hen huy nguyen huy nguyen nguyen huy nguyen huy nguyen huy huy nguyen huy nguyen</p>

.abc {
    text-overflow: ellipsis;
    // you need this two below to make it work
    white-space: nowrap;
    overflow: hidden;
}

（当然你也可以在javascript中进行，查看这里：Show short text when text is long?）

在这里查看有关文本溢出的更多信息：https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow

如何检测 html 列表中的自动换行符并更改文本内容以避免换行符？

How do I detect an automatic line break in a html list and change the text content so that the line break is avoided?

html

css

list

row

line-breaks