HTML中CSS如何设置P标签超出指定行数后自动隐藏？
核心代码如下所示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>全栈攻城狮网</title>
<style type="text/css">
body{
background-color: #eee;
}
p {
width: 400px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
</style>
</head>
<body>
<p>全栈攻城狮，是一个学习电脑知识的网站
全栈攻城狮，是一个学习电脑知识的网站
全栈攻城狮，是一个学习电脑知识的网站
全栈攻城狮，是一个学习电脑知识的网站
全栈攻城狮，是一个学习电脑知识的网站
全栈攻城狮，是一个学习电脑知识的网站
全栈攻城狮，是一个学习电脑知识的网站
全栈攻城狮，是一个学习电脑知识的网站
</p>
</body>
</html>
通过下图我们可以知道-webkit-line-clamp: 2;属性是用于设置显示的行数。在这里我们设置显示2行，超出部分用省略号表示。
发表评论 取消回复