css两行省略一行自适应

CSS技巧之“两行省略一行自适应”

p {
  display: -webkit-box;  /* 老版本 Safari, iOS */
  display: -moz-box;  /* 老版本 Firefox (buggy but mostly works) */
  display: -ms-flexbox;  /* IE 10 */
  display: -webkit-flex;  /* 新版本 Safari, iOS */
  display: flex;  /* 标准的弹性盒子 */
  -webkit-box-orient: vertical;  /* 设置文本方向为垂直方向 */
  overflow: hidden; /* 隐藏超出的文本 */
  text-overflow: ellipsis;  /* 文字超出部分以“...”形式省略显示 */
  -webkit-line-clamp: 2;  /* 控制需要显示的行数 */
} 

在前端开发中，页面上经常需要显示一段文本，但是又不想让它占据太多的空间，于是就有了“两行省略一行自适应”这种实现方式。

其实这个实现方式就是利用了CSS3的弹性盒子布局。把需要显示的文本放在一个p标签里面，然后设置p标签的display属性为flex，并且设置一些其他的属性，就可以实现所需效果。

具体实现步骤如下：

1. 将p标签的display属性设置为flex。

2. 设置-webkit-box-orient和-webkit-line-clamp属性，控制需要显示的行数。

3. 设置overflow:hidden属性，隐藏超出的文本。

4. 设置text-overflow: ellipsis属性，将文字超出部分以“...”形式省略显示。

5. 最后就是按照需要自定义其他的样式。

需要注意的是，虽然这种实现方式比较简单，但是它对于一些较老的浏览器可能不太兼容，比如IE9及以下版本。所以在实际应用中需要根据实际情况做出相应的兼容性处理。

总之，“两行省略一行自适应”是一种简单实用的CSS技巧，让我们在开发页面时更加得心应手。