【CSS】控制文本溢出显示省略号

<p>css文本溢出显示省略号css文本溢出显示省略号css文本溢出显示省略号css文本溢出显示省略号css文本溢出显示省略号</p>

1、单行文本溢出，添加以下样式：

       p {
            background-color: #ccffcc;
            width: 300px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

展示效果如下：

 

2、多行文本溢出，添加以下样式：

    p {
            background-color: #ccffcc;
            width: 300px;
            overflow: hidden;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
        }

展示效果如下：

注：其中-webkit-line-clamp: 2;代表超过两行的文本溢出用省略号表示。

 

 

 

 

 

附：启蒙链接：https://www.cnblogs.com/hellman/p/5755376.html