logo标签列表

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

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

这是我的代码示例。

1个回答
8
如果您添加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仅在以下情况下起作用： 框具有除visible之外的溢出（使用overflow：visible时，文本会简单地流出框） 框具有white-space：nowrap或类似约束文本布局方式的方法。（如果没有此功能，则文本将换到下一行）

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接