CSS中超出的文本内容显示省略号

时间:2024-03-04 20:49:11

首先,分析超出内容有两种情况,单行内容超出和多行内容超出,以下逐一说明:

单行内容操作:

  单行操作必须有width属性,就是元素要有宽和高的限制才可以,具备以上基本条件之后,编写以下代码

  overflow:hidden;

  text-overflow:ellipsis;

  white-space:nowrap;

  此时,即可看到单行文本超出显示省略号的效果。

多行内容操作:

  多行文本超出省略早期是没有该写法的,本文使用的是css3对WebKit的拓展写法,需要注意,该方法只适用于WebKit浏览器和移动端页面。

  以下为关键代码片段:

  overflow: hidden;

  display: -webkit-box;

  -webkit-line-clamp: 5;

  -webkit-box-orient: vertical;

  此时,即可看到多行文本超出显示省略号的效果。
简单解释:
  首先设置元素为弹性盒模型,也即是display:box,然后设置限制文本的行数,使用line-clamp属性,最后设置弹性盒子内容的排列方式box-orient,别忘却了还需要添加超出隐藏属性设置overflow: hidden。

  以上就是设置CSS中超出的文本内容显示省略号的方法!