css文本溢出隐藏

热心市民`

已于 2023-08-09 10:21:22 修改

阅读量1.4k

点赞数 1

文章标签： css css3 html

于 2022-06-09 14:55:21 首次发布

本文链接：https://blog.csdn.net/m0_48074947/article/details/125203318

版权

本文介绍了CSS中如何实现单行和多行文本溢出时隐藏并显示省略号的方法，包括使用overflow、text-overflow和white-space属性的组合，以及对于多行文本使用WebKit特定的CSS扩展技巧。

摘要由CSDN通过智能技术生成

单行文本溢出隐藏

overflow: hidden;//溢出隐藏    
text-overflow:ellipsis;//文本显示省略号    /*默认是clip 超出部分直接切除*/
white-space: nowrap; //不换行  /*默认normal 自动换行*/
word-break: break-all; 如果不确定会有纯数字或者中文那一定要加上这句

多行文本

 display: -webkit-box; //使用了flex，需要加
  overflow: hidden;     //超出隐藏
  word-break: break-all; //纯英文、数字、中文
  text-overflow: ellipsis;  //省略号
  -webkit-box-orient: vertical; //垂直
  -webkit-line-clamp: 1;  //显示一行
  white-space:pre-line;   //合并空白符序列，但是保留换行符,如果要使用这个垂直和显示几行的代码也要写