CSS中文字太多自动显示省略号

梧杵

已于 2022-07-14 15:25:19 修改

阅读量1.5k

点赞数

分类专栏：前端 # css 文章标签： css 前端 html

于 2022-07-14 15:22:55 首次发布

本文链接：https://blog.csdn.net/qq_43378689/article/details/125785175

版权

前端同时被 2 个专栏收录

20 篇文章 1 订阅

订阅专栏

css

3 篇文章 0 订阅

订阅专栏

这篇博客介绍了如何使用CSS样式来实现单行和多行文本的省略号效果。通过设置`white-space: nowrap`、`overflow: hidden`和`text-overflow: ellipsis`属性，可以轻松地对超出容器宽度的文本进行截断并显示省略号。此外，利用`-webkit-line-clamp`和`-webkit-box-orient`属性，可以实现多行文本的省略号展示。

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

初始结果

在这里插入图片描述

自动添加省略号

在这里插入图片描述

源码

<!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{
            height: 40px;
            width: 100px;
            background-color:aqua;
            /* 第一步：规定只能在一行显示 */
            white-space: nowrap;
            /* 第二部：多出的部分隐藏 */
            overflow: hidden;
            /* 第三步：加上省略号 */
            text-overflow: ellipsis;
        }
        .box2{
            height: 40px;
            width: 100px;
            background-color:rgb(92, 138, 138);
            /* 第一步：弹性伸缩盒子模型展示 */
            display: -webkit-box;
            /* 限制在一个块元素显示的文本的行数 */
            -webkit-line-clamp: 2;
            /* 设置或检索伸缩盒子对象的子元素的排列方式 */
            -webkit-box-orient: vertical;
            /* 第二部：多出的部分隐藏 */
            overflow: hidden;
            /* 第三步：加上省略号 */
            text-overflow: ellipsis;
        }


    </style>
</head>
<body>
    单行省略号
    <div class="box1">
        我啥也不想说，此处省略一万字
    </div>
    <br/>
    <hr>
    <br/>
    多行省略号(具体行数自定义)
    <div class="box2">
        我啥也不想说，此处省略一万字
    </div>
    
</body>
</html>