[分享]css两行超出省略号不生效

CSS中有一个比较常用的样式，就是让长文字内容以省略号的形式显示，以减少页面的混乱感，增加页面的美观性。不过，有时候我们会发现，在某些情况下，两行超出的内容并没有按照预期的方式进行显示。那么，这种情况...

CSS中有一个比较常用的样式，就是让长文字内容以省略号的形式显示，以减少页面的混乱感，增加页面的美观性。不过，有时候我们会发现，在某些情况下，两行超出的内容并没有按照预期的方式进行显示。那么，这种情况是怎么回事呢？

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

上面这段CSS代码就是常用的让文字超过两行时显示省略号的样式。我们来说一下其中几个属性的含义：

• display: -webkit-box;是为了将文字内容转变为一个 flex 容器，这样才能达到使用-webkit-line-clamp属性的效果。
• -webkit-box-orient: vertical;定义了 flex 容器的主轴方向。
• overflow: hidden;隐藏超出容器的部分。
• text-overflow: ellipsis;超出部分显示省略号。
• -webkit-line-clamp: 2;限制只显示两行文字。

但是，这段样式在某些情况下，两行以上的内容仍然没有按照预期进行省略号的显示。这可能是由于内容中存在换行符或空格的原因。这时候，我们可以使用white-space: pre-wrap;属性，把空格和换行符处理成普通字符，使其能正常被计算到父容器宽度内。

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

以上就是关于CSS两行超出省略号不生效的内容分析。在实际开发中，我们需要根据不同的情况选择使用不同的属性来处理省略号的显示问题，从而达到更好的效果。