文字超出末尾显示省略号

.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,否则就不会生效.

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

# 快速导航

# 单行文字

# 多行文字

# 相关文档

关注公众号

加作者微信

扫码易购