HTML5CSS3多行文本溢出显示省略号

最新推荐文章于 2023-10-07 11:37:33 发布

Dowen00

最新推荐文章于 2023-10-07 11:37:33 发布

阅读量72

点赞数

文章标签： css3 html5 css

本文链接：https://blog.csdn.net/m0_63171030/article/details/130246913

版权

这段HTML和CSS代码展示了如何使用CSS的`text-overflow:ellipsis`，`overflow:hidden`，以及弹性盒子模型来实现当文本内容超过设定宽度时，多行文本自动显示省略号的效果。

摘要由CSDN通过智能技术生成

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>多行文本溢出显示省略号</title>
    <style>
        div {
            width: 150px;
            height: 65px;
            background-color: pink;
            margin: 100px auto;
            overflow: hidden;
            text-overflow: ellipsis;
            /* 弹性伸缩盒子模型显示 */
            display: -webkit-box;
            /* 限制在一个块元素显示的文本的行数 */
            -webkit-line-clamp: 3;
            /* 设置或检索伸缩盒对象的子元素的排列方式 */
            -webkit-box-orient: vertical;
        }
    </style>
</head>

<body>
    <div>
        啥也不说，此处省略一万字,啥也不说，此处省略一万字此处省略一万字
    </div>
</body>

</html>

运行结果：