【css】超过文本显示省略号

smart_dream2023-08-07 20:50

显示省略号的前提：必须有指定宽度

一、单行文本超出部分显示省略号

属性	取值	解释
overflow	hidden	当内容超过盒子宽度, 隐藏溢出部分
white-space	nowrap	让文字在一行内显示, 不换行
text-overflow	ellipsis	如果溢出的内容是文字, 就用省略号代替

css 复制代码

.one-line{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}

二、多行文本超出部分显示省略号

属性	取值	解释
overflow	hidden	当内容超过盒子宽度, 隐藏溢出部分
text-overflow	ellipsis	如果溢出的内容是文字, 就用省略号代替
display	-webkit-box	必须设置盒子属性为-webkit-box
-webkit-line-clamp	2、3、4...	设置超出几行后，超出部分显示省略号注：这是一个不规范的属性（unsupported WebKit property）
-webkit-box-orient	vertical	盒子实现多行显示的必要条件，文字垂直展示
word-break	break-all	单词破坏：主要用于破坏英文单词的整体性，即在英文单词还没有在一行完全展示时就换行。简单的理解就是一个单词可能会被分成两行展示

css 复制代码

.two-line{
  overflow:hidden;
  text-overflow: ellipsis;
  display:-webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient:vertical;
  -moz-box-orient:vertical;
  word-break: break-all;
}

说明：

-webkit-line-clamp 可以把块容器中的内容限制为指定的行数，它只有在 display设成 -webkit-box 或 -webkit-inline-box 并且 -webkit-box-orient设成 vertical 时才有效果。