当前位置:首页 > CSS

CSS文本一行/多行溢出隐藏,显示省略号

当文本过多,而我们要想在不同尺寸的设备下保证布局不会错乱,就需要对文字的长度进行限定,不能全部显示,这时,就需要对文本进行处理,让文本在显示一行/多行后,显示省略号。

当文本过多,而我们要想在不同尺寸的设备下保证布局不会错乱,就需要对文字的长度进行限定,不能全部显示,这时,就需要对文本进行处理,让文本在显示一行/多行后,显示省略号。

1、单行文本溢出隐藏显示省略号:

p{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

2、多行文本溢出隐藏显示省略号:

p{
   overflow: hidden;
   display: -webkit-box;
   text-overflow: ellipsis;
   -webkit-line-clamp: 2;                 /* 文本行数 */
   -webkit-box-orient: vertical;
}


1

文章评论