css设置多余文本省略号显示,多行文本超出部分省略号显示

1.单行文本框超出部分省略号显示

单行文本超出部分省略号显示,设置标签固定宽,代码如下：

//html代码
<p class="des">各位李氏宗亲大家好,我来自河南省郑州市管城区,有郑州的朋友吗?联系电话132-xxxx-8250</p>
//css代码
.des{
width:350px;
overflow: hidden;/** 隐藏超出的内容 **/
text-overflow: ellipsis;/**显示省略符号来代表被修剪的文本**/
white-space: nowrap;/**不换行,只显示一行**/
}

显示效果如下图所示：

2.多行文本框超出部分省略号显示

//html代码
<p class="des">各位李氏宗亲大家好,我来自河南省郑州市管城区,有郑州的朋友吗?联系电话132-xxxx-8250</p>
//css代码
.des{
	width:350px;
    overflow: hidden;/** 隐藏超出的内容 **/
    display: -webkit-box;/** 将对象作为伸缩盒子模型显示 **/
    -webkit-box-orient: vertical;/** 设置或检索伸缩盒对象的子元素的排列方式 **/
    -webkit-line-clamp: 2;/**显示行数设置,示例为2行**/
}

显示效果如下图所示：

标签：显示,省略号,代码,超出,webkit,文本,css
来源： https://blog.csdn.net/qq_45571606/article/details/103592079