[分享]css两行超出省略号兼容

在前端开发中，经常会遇到文本内容过多而导致显示不下的问题。为此，我们可以使用CSS中的textoverflow属性来解决这个问题。但是，当文本内容超出两行时，textoverflow属性会失效。那么，...

在前端开发中，经常会遇到文本内容过多而导致显示不下的问题。为此，我们可以使用CSS中的text-overflow属性来解决这个问题。但是，当文本内容超出两行时，text-overflow属性会失效。那么，该如何解决这个问题呢？

/* 通用样式 */
p {
  overflow: hidden;
  height: 3em; /* 默认显示三行 */
  line-height: 1em; /* 文本行高 */
  margin-bottom: 20px;
}

/* 兼容性写法 */
/* Firefox */
/* -moz-第一行省略，且第二行后用省略号代替 */
/* -moz-ellipsis-after */
/* -moz-first-ellipsis */
/* 其它浏览器 */
/* 第一行省略，且第二行后用省略号代替 */
/* -webkit-line-clamp */
/* 第二行后用省略号代替 */
/* -webkit-box-orient */
/* -webkit-box-pack */
/* -webkit-box-lines */
.line-clamp2 {
  /* Firefox */
  display: -moz-box;
  -moz-box-orient: vertical;
  -moz-box-align: center;
  -moz-box-pack: justify;
  /* 其它浏览器 */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  -webkit-box-pack: justify;
  -webkit-box-lines: multiple;
}
/* 可以根据需求自行调整line-clamp的值 */ 

如上面的代码所示，为了解决text-overflow属性失效的问题，我们可以采用一些兼容性写法。其中，在Firefox浏览器中，我们可以使用-moz-ellipsis-after和-moz-first-ellipsis属性来实现第一行省略、第二行后使用省略号代替的效果。在其它浏览器中，我们可以使用-webkit-line-clamp、-webkit-box-orient、-webkit-box-pack和-webkit-box-lines等属性来实现同样的效果。

总之，在日常开发中，如果遇到文本内容过多的问题，不妨尝试一下上述的兼容性写法，相信一定能帮助我们有效地解决这个问题。