Question

有没有办法删除无法容纳在元素内的不可包含的字符。

例如 -

如果有特定宽度的列表 -

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

使用此样式 -

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

然后，长项文本将被包装到第二行。

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

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

编辑：可以有多个不同宽度的列表项 - 因此，通过计算字符来确定子字符串 - 可能不是解决方案＆amp;也可用于ie8 +

Answer 1

为示例添加文本省略号：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;
}

Answer 2

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

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

包装并删除多余的字符

2 个答案: