Question

我正在尝试使用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>

Here's my fiddle.

Answer 1

如果你添加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;
}

来自doc

文本溢出声明允许您处理剪切的文本：即不适合其框的文本。文本溢出仅在以下情况下发挥作用：盒子有溢出而不是可见（溢出：可见文本只是流出盒子）该框具有空格：nowrap或类似于约束文本布局方式的方法。（如果没有这个，文本将换行到下一行）

如何在CSS中的文本上显示省略号

1 个答案: