文字溢出省略号显示

最新推荐文章于 2025-04-27 16:54:52 发布

原创最新推荐文章于 2025-04-27 16:54:52 发布 · 119 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #css

本文介绍如何使用CSS实现多行文字在宽度受限的div中优雅地显示省略号，通过`-webkit-line-clamp`和`-webkit-box-orient`属性控制内容在两行内的展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

example：

<!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 type="text/css">
    div {
        width: 150px;
        height: 45px;
        background-color: skyblue;
        margin: 100px auto;
        overflow: hidden;
        text-overflow: ellipsis;
        /* 弹性伸缩盒子显示模型 */
        display: -webkit-box;
        /* 限制在一个块元素文本显示的行数 */
        -webkit-line-clamp: 2;
        /* 设置或检索伸缩盒子子元素排列方式 */
        -webkit-box-orient: vertical;
    }
    </style>
</head>
<body>
    <div>
        啥也不说，此处省略一万字；啥也不说，此处省略一万字；
    </div>
</body>
</html>
//这是文本在2行显示并且省略