单行和多行文本省略号如何实现

最新推荐文章于 2022-05-10 17:14:36 发布

who am I？ 6666

最新推荐文章于 2022-05-10 17:14:36 发布

阅读量155

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/machine_vision123/article/details/119651770

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>单行文本省略号如何实现</title>
    <style>
        .box1 {
            width: 200px;
            height: 23px;
            margin: 100px auto;
            color: red;
            background-color: green;
            /* 强制文本一行显示 white-space: normal;默认文本自动换行*/
            white-space: nowrap;
            /* 溢出隐藏 */
            overflow: hidden;
            /* 文本溢出省略号 */
            text-overflow: ellipsis;
        }

        .box2 {
            width: 200px;
            height: 45px;
            margin: 0 auto;
            color: red;
            background-color: green;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            /* 第二行开始省略，这个可以随意设置，第三行四行开始出现省略号都可以 */
            -webkit-line-clamp: 2;
            /* 溢出部分隐藏 */
            overflow: hidden;
        }
    </style>
</head>

<body>
    <div class="box1">墙角数枝梅，凌寒独自开。春江花月夜</div>
    <div class="box2">
        墙角数枝梅，凌寒独自开。春江花月夜墙角数枝梅，wa他
    </div>
</body>

</html>

who am I？ 6666

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
单行和多行文本省略号如何实现

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <titl.
复制链接

扫一扫

专栏目录