css设置内容溢出的隐藏、换行和省略

最新推荐文章于 2024-04-20 17:59:05 发布

Monop

最新推荐文章于 2024-04-20 17:59:05 发布

阅读量1k

点赞数 1

本文链接：https://blog.csdn.net/m0_53251830/article/details/122470005

版权

一、一行显示，溢出隐藏

 /*这里要显示的设置宽度*/
width:100%;  
overflow:hidden;  /*溢出隐藏*/
white-space:nowrap;  /*溢出不换行*/
text-overflow:ellipsis;  /*文字超出宽度则显示ellipsis省略号*/

二、溢出换行，多行显示

display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
overflow: hidden;  
word-break: break-all;   /* break-all(允许在单词内换行。)  对pc端可以不要*/ 
text-overflow: ellipsis;   /* 超出部分省略号 */
-webkit-box-orient: vertical;   /** 设置或检索伸缩盒对象的子元素的排列方式 **/
-webkit-line-clamp: 3;   /** 显示的行数 **/