文字超过两行隐藏
实现效果如下
html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文字超过两行隐藏</title>
<style>
.con{width: 600px;height: 200px;border: 1px solid black;border-radius: 10px;text-align: center;}.title{font-size: 25px;}.date{font-size: 15px;color: gray;text-align: right;margin-right: 20px;}.content{font-size: 20px;text-indent: 2em;margin-top: 0px;line-height: 40px;color: grey;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;}
</style>
</head>
<body>
<div class="con">
<p class="title">加快建设科技强国 实现高水平科技自立自强</p>
<p class="date">2024.7.31</p>
<p class="content">
加快建设科技强国 实现高水平科技自立自强加快建设科技强国 实现高水平科技自立自强加快建设科技强国
实现高水平科技自立自强实现高水平科技自立自强实现高水平科技自立自强实现高水平科技自立自强实现高水平科技自立自强实现高水平科技自立自强
</p>
</div>
</body>
</html>
overflow: hidden;/* 用于控制当内容溢出容器将被隐藏，不会显示在容器之外。*/text-overflow: ellipsis;/*用于控制当文本溢出容器时显示的样式，ellipsis值表示在文本溢出的地方显示省略号（...） */display: -webkit-box;/* 用于设置元素的显示类型为-webkit-box，这是WebKit浏览器（如Chrome和Safari）特有的一个值，用于实现文本的自动换行和截断。 */-webkit-line-clamp: 2;/*用于限制文本显示的行数。2表示只显示两行文本。当文本超过两行时，超出的部分将被截断。*/
最终实现效果，文本超过两行就隐藏并以省略号显示
本文转载自: https://blog.csdn.net/m0_52861607/article/details/140827160
版权归原作者 橙子味的气泡水 所有， 如有侵权，请联系我们删除。
版权归原作者 橙子味的气泡水 所有， 如有侵权，请联系我们删除。