换行并删除额外的字符

Wrap and remove extra characters

本文关键字：字符 删除 换行      更新时间：2023-09-26

是否有一种方法可以删除不能放入元素中的不可包装字符?

例如

——

如果有特定宽度的列表-

<ul>
    <li>First word</li>
    <li>This is a long long long word</li>
    <li>Another word</li>
</ul>

with this Style-

ul li
{
    width:100px;
    height:20px;
    border:1px solid black;
}

然后，较长的条目文本将被换行到第二行。

如何删除额外的不可包装的单词/字符?

这是小提琴: http://jsfiddle.net/N9ct3/1/

Edit:可以有多个具有不同宽度的列表项-因此，通过计算字符的子字符串-可能不是一个解决方案&

通过添加文本省略号，例如:http://jsfiddle.net/N9ct3/2/

ul li
{
    width:100px;
    height:20px;
    background-color:lightblue;
    border:1px solid black;
    //Avoid text overflow by adding "..."
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

可以添加css规则overflow: hidden;到列表项

ul li
{
    width:100px;
    height:20px;
    overflow: hidden;
    background-color:lightblue;
    border:1px solid black;
}
相关文章：