css3 超出二行隐藏
导读：在网页设计中，我们经常需要控制文本的显示行数，而超出部分需要进行隐藏，以便更好的布局和展示效果。这时，CSS3中的“超出N行隐藏”功能就派上用场了。在实现超出二行隐藏的效果时，我们需要用到CSS3中的两个属性：line-clamp和-web...
在网页设计中，我们经常需要控制文本的显示行数，而超出部分需要进行隐藏，以便更好的布局和展示效果。这时，CSS3中的“超出N行隐藏”功能就派上用场了。在实现超出二行隐藏的效果时，我们需要用到CSS3中的两个属性：line-clamp和-webkit-line-clamp。其中-webkit-line-clamp是Safari和Chrome浏览器的私有属性，而line-clamp是标准属性，多数浏览器都已经支持。
首先，在我们要实现文本溢出隐藏的元素上，设置以下CSS属性：
p {
display: -webkit-box;
/* 将块容器变成弹性伸缩盒子 */-webkit-box-orient: vertical;
/* 让伸缩盒子垂直排列 */overflow: hidden;
/* 溢出内容隐藏 */text-overflow: ellipsis;
/* 显示省略符号来代表被截断的文本 */}
其中，text-overflow用于设置文本溢出显示省略号。
接下来，则是重点属性line-clamp，可写成：
p {
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 2;
/* 显示2行文本，超出的文本将被隐藏 */line-clamp: 2;
}
我们可以将以上代码放在pre标签中，并在浏览器中查看具体效果：
pre>
p>
2015年3月17日是一天难忘的日子，因为我和我的另一半在这一天步入了婚姻的殿堂。那天朋友们为我们庆贺婚礼，我们感到非常的幸福和开心。如今，我们已经度过了多个甜蜜的日子，一起经历了人生的风风雨雨，感情更加稳固和美好。/p>
当文本超过2行时，超出的文本将被隐藏，显示省略符号，整个布局也会更加美观。
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： css3 超出二行隐藏
本文地址： https://pptw.com/jishu/569583.html