[分享]css内容显示两行

在CSS中，有一个非常有用的属性可以让内容显示成两行，那就是“line-clamp”。

/* 使用line-clamp属性 */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
} 

这个属性可以协助我们控制一个元素内的文本不超过指定的行数。可以用来防止文本溢出，让页面更加美观。

需要注意的是，这个属性目前只有在webkit内核的浏览器中支持，如果需要让其在其他浏览器中使用，需要加入相应的前缀。

/* 兼容其他浏览器 */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  /* Firefox */
  display: -moz-box;
  -moz-box-orient: vertical;
  -moz-box-lines: 2;
  /* IE */
  display: -ms-box;
  -ms-line-clamp: 2;
  -ms-box-orient: vertical;
} 

可以看到，在代码中，除了webkit内核的属性外，还加入了相应的其他浏览器兼容性属性。

使用line-clamp属性，可以让我们更好地掌控页面的布局和美观程度，让用户体验更加良好。