[分享]css两行点点

CSS有很多实用的技巧，其中之一是使用两行点点。这种技巧可以在许多网站和应用程序中使用，特别是在卡片和列表中。.listitem { overflow: hidden; textoverflow: e...

CSS有很多实用的技巧，其中之一是使用两行点点。这种技巧可以在许多网站和应用程序中使用，特别是在卡片和列表中。

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

上面的CSS代码可以实现两行点点效果。要使用这个技巧，首先需要在元素上设置overflow: hidden属性。这将使文本内容被裁剪。接下来，设置text-overflow属性为“ellipsis”，这将把未显示的文本替换为三个点号。

最后，使用display: -webkit-box、-webkit-line-clamp和-webkit-box-orient属性。这个组合的作用是使文本只显示在两行，超出则使用点号替换。-webkit-box属性指示元素将使用Flexbox模型进行布局。-webkit-line-clamp属性指示元素的文本流限制为2行。-webkit-box-orient属性指示Flexbox模型应该垂直排列元素。

总之，CSS中的两行点点技巧可以帮助我们在UI设计和开发中更加灵活地控制文本内容的显示效果，使用户界面更加简洁、易于理解。