1

我正在尝试使用 CSS 在我的长文本上显示省略号。当文本不包含空格时，这似乎可以正常工作，因此不能被破坏（即换行），但是当它包含空格时，省略号不会出现。

我的代码是：

<!DOCTYPE html>
<html>
    <head>
        <style>
span {
    width: 150px;
    display: inline-block;
    border: 1px dotted blue;
    height: 1em;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 4px;
}       
        </style>
    </head>
    <body>
        <div>
            <span>
            This is some long text that I want to have an ellipsis on.
            </span>
        </div>
        <div>
            <span>
            afejaklfjefklafjeklfjeklfjeklfejfklejfkfjeklfjeklfejfklaejfeklfejfklejfklfejfkl
            </span>
        </div>
    <body>
</html>

这是我的小提琴。

4

1 回答 1

4

如果添加white-space:nowrap省略号，就会出现。原因是带有空格的文本将在空格的情况下换行，并且不需要省略号。如果您删除您的内容，您可以看到它的实际效果，overflow-hidden并且文本将被包裹显示。

span {
    width: 150px;
    display: inline-block;
    border: 1px dotted blue;
    height: 1em;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 4px;
    white-space: nowrap;
}

来自文档

text-overflow 声明允许您处理剪辑文本：即不适合其框的文本。text-overflow 仅在以下情况下起作用：盒子有溢出而不是可见（溢出：可见文本只是从盒子里流出）盒子有空格：nowrap 或类似的限制文本放置方式的方法出去。（没有这个，文本将换行到下一行）

于 2013-05-28T01:52:11.820 回答