CSS设置多余文本省略号显示,多行文本超出部分省略号显示
程序员文章站
2022-04-22 13:46:49
...
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行**/
}
显示效果如下图所示:
上一篇: 判断用户session 是否过期,如果过期,让用户重新登录
下一篇: 校园里的搞笑人才多。