css3实现文本指定行数，超出部分省略号代替

最新推荐文章于 2024-09-07 11:39:38 发布

原创最新推荐文章于 2024-09-07 11:39:38 发布 · 1.5k 阅读

2 ·

CC 4.0 BY-SA版权

随笔专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何使用CSS实现文本的单行或多行溢出效果，并通过不同的属性设置确保文本展示的美观性和阅读体验。

.text1 {
/*单行*/

  width:200px;
  overflow:hidden;
  text-overflow:ellipsis;
  -o-text-overflow:ellipsis;
  -webkit-text-overflow:ellipsis;
  -moz-text-overflow:ellipsis;
  white-space:nowrap;
}
.text2 {
/*多行*/

  width:200px;
  word-break:break-all;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}