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行,超出部分用省略号表示


点赞(0) 打赏

Comment list 共有 0 条评论

暂无评论
立即
投稿
发表
评论
返回
顶部
{__SCRIPT__}