css 控制段落超出三行的部分显示...

最新推荐文章于 2024-06-21 13:38:54 发布

Markov Zheng

最新推荐文章于 2024-06-21 13:38:54 发布

阅读量8.3k

点赞数 1

分类专栏：网络学习日志 HTML CSS 文章标签： overflow -webkit-line-clamp

本文链接：https://blog.csdn.net/marko_zheng/article/details/85321194

版权

网络学习日志同时被 3 个专栏收录

111 篇文章 4 订阅

订阅专栏

HTML

37 篇文章 0 订阅

订阅专栏

CSS

6 篇文章 0 订阅

订阅专栏

css 控制段落超出三行的部分显示…

代码如下

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<style>
    p{
        width:100px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3;/*超出3行部分显示省略号，去掉该属性 显示全部*/
        -webkit-box-orient: vertical;
    }
</style>
<body>
    <p>首先得判断文本自否超过四行，因为这些一般都是是前端异步请求然后后端发送过来，在组长的指导下，使用了 Vue 中的 nextTick 来监听 DOM 中是数据变化。接下来主要是 css 上的思路，其实上图可以分为两部分，如下图，标号1的部分展示前面三行，标号为2的部分会根据1的行数判断缩进的大小，然后展示第四行。最后通过背景色的控制让两者看上去是一段文字。</p>
</body>
</html>

效果图：
在这里插入图片描述

Markov Zheng

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
3
评论
css 控制段落超出三行的部分显示...

css 控制段落超出三行的部分显示…代码如下&lt;!DOCTYPE html&gt;&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;&lt;head runat="server"&gt;&lt;meta http-equiv="Content-Type" content="text/html; charset=utf
复制链接

扫一扫