CSS技巧之“两行省略一行自适应”p { display: -webkit-box; /* 老版本 Safari, iOS */ display: -moz-box; /* 老版本 Firefox (
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技巧,让我们在开发页面时更加得心应手。
粉丝
0
关注
0
收藏
0