[分享]css县只显示两行

在网站开发中，经常会出现一些需要省略多余内容的情况，此时CSS 中的省略号属性就会派上用场。下面以只显示两行为例，来介绍如何使用省略号属性实现。 .ellipsis { overflow: hidde...

在网站开发中，经常会出现一些需要省略多余内容的情况，此时CSS 中的省略号属性就会派上用场。下面以只显示两行为例，来介绍如何使用省略号属性实现。

.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
} 

这是一个通用的样式，将元素的展示方式改为弹性盒子，并设置为纵向排列。同时，通过设置 -webkit-box-orient: vertical，使得元素内文本在纵向排列下正确渲染。同时，通过设置 -webkit-line-clamp 属性值为需要显示的行数，这里是 2 行，超出后会自动省略号。

当然，以上代码只是一种实现方式，有些场景可能会有不同的要求。比如，如果要求省略的文本长度必须在 50 字以内，可以使用以下代码：

.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  display: inline-block;
}

.ellipsis::after {
  content: "";
  display: inline-block;
  width: 1%;
  height: 0;
  vertical-align: middle;
} 

这里通过设置宽度为 1% 的伪元素，来撑开元素的宽度，让文本内容在一行内完整显示，然后再使用 text-overflow 属性来省略文本。

无论是哪种实现方式，都可以根据具体需求进行调整和优化。同时，我们还可以通过 JavaScript 动态计算文本长度，来达到更加精确和自然的省略效果。