如何检测 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 列表中的自动换行符并更改文本内容以避免换行符？
【发布时间】：2021-03-08 20:08:28
【问题描述】：

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

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

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

【问题讨论】：

检查text-overflow: ellipsis; - w3schools.com/cssref/css3_pr_text-overflow.asp

标签： html css list row line-breaks

【解决方案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

【讨论】：