# 文字超出末尾显示省略号

# 快速导航

# 单行文字

单行溢出省略号显示-固定宽度是必须的-文本内容超出部分溢出隐藏,文本内容超出部分溢出隐藏,文本内容超出部分溢出隐藏,文本内容超出部分溢出隐藏,文本内容超出部分溢出隐藏
宽度-width:
内容溢出-overflow:
文本溢出-text-overflow:
段落文本换行-white-space:

实现代码如下


 

 



.single-ellpsis-wrap {
  width: 500px; // 注意宽度是必须的
  overflow: hidden; // 超出部分隐藏
  text-overflow: ellipsis; // 超出部分,用...省略号代替
  white-space: nowrap; // 不换行
}
1
2
3
4
5
6

# 多行文字

多行溢出省略号显示-纵向显示列数,溢出部分末尾添加省略号,多行溢出省略号显示-纵向显示列数,溢出部分末尾添加省略号,line-clamp指定显示多少列,弹性和模型,word-break:break-all允许在单词内换行 box-sizing:border-box:增加padding与border不把它计算到里面去,多行溢出省略号显示-纵向显示列数,溢出部分末尾添加省略号,多行溢出省略号显示-纵向显示列数,溢出部分末尾添加省略号多行溢出省略号显示-纵向显示列数,溢出部分末尾添加省略号,多行溢出省略号显示-纵向显示列数,溢出部分末尾添加省略号多行溢出省略号显示-纵向显示列数,溢出部分末尾添加省略号,多行溢出省略号显示-纵向显示列数,溢出部分末尾添加省略号,多行溢出省略号显示-纵向显示列数,溢出部分末尾添加省略号,多行溢出省略号显示-纵向显示列数,溢出部分末尾添加省略号,多行溢出省略号显示-纵向显示列数,溢出部分末尾添加省略号,多行溢出省略号显示-纵向显示列数,溢出部分末尾添加省略号,多行溢出省略号显示-纵向显示列数,溢出部分末尾添加省略号
宽度:
显示行数:

实现代码如下


 

 




.multi-ellpsis-wrap {
  display: -webkit-box; // 声明弹性盒模型,浏览器前缀必须加上,火狐-moz/IE-moz/chrome-webkit
  -webkit-box-orient: vertical; // 垂直方向
  -webkit-line-clamp: 3; //需要显示的行数
  overflow: hidden; // 溢出隐藏
  text-overflow: ellipsis; // 内容超出部分,省略号显示
}
1
2
3
4
5
6
7

提示

当声明display:box,时,必须要加上浏览器前缀-webkit-box,否则就不会生效.

# 相关文档

关注公众号

一个走心,有温度的号,同千万同行一起交流学习

加作者微信

扫二维码 备注 【加群】

扫码易购

福利推荐