[分享]css内容显示两行显示省略号

在网页设计中，经常有需要在内容很多的地方使用省略号来表示内容被截断的情况。这时候我们就需要使用 CSS 来控制文本的显示。首先我们可以使用文本溢出方式来进行控制，通过设置 textoverflow: ...

在网页设计中，经常有需要在内容很多的地方使用省略号来表示内容被截断的情况。这时候我们就需要使用 CSS 来控制文本的显示。

首先我们可以使用文本溢出方式来进行控制，通过设置 text-overflow: ellipsis; 属性，当文本溢出容器时，会显示省略号来表示未显示的文本。

.my-text {
  width: 200px; /* 容器宽度 */
  white-space: nowrap; /* 防止文本换行 */
  overflow: hidden; /* 溢出隐藏 */
  text-overflow: ellipsis; /* 显示省略号 */
} 

上述代码将会把 .my-text 容器内的文本截断并显示省略号，技术限制只会显示一行。

如果想要显示两行并加上省略号，我们可以使用 -webkit-line-clamp 属性，该属性可以设置显示的行数，同时对于 WebKit 浏览器，也需要加上 -webkit-box-orient: vertical; 属性来设置 CSS3 的基础布局属性。

.two-line-text {
  display: -webkit-box;
  -webkit-line-clamp: 2; /* 显示两行 */
  -webkit-box-orient: vertical; /* 设置为竖列布局 */
  overflow: hidden; /* 溢出隐藏 */
  text-overflow: ellipsis; /* 显示省略号 */
} 

上述代码会将 .two-line-text 容器内的文本限制显示两行，同时显示省略号，这在新闻列表或者简介展示中比较常见。