CSS基础之省略号的制作（单行&多行）

最新推荐文章于 2024-02-18 09:57:43 发布

整天敲代码的小韩

最新推荐文章于 2024-02-18 09:57:43 发布

阅读量1k

点赞数

文章标签： python pandas 机器学习

本文链接：https://blog.csdn.net/m0_48749505/article/details/129625417

版权

应用场景：

例如：相信很多小伙伴在初学css绘制页面时，都会遇见文本超出指定区域，用...代替的情况；下面详细为大家介绍了单行文本如何制作省略号以及多行文本如何制作省略号

单行文本制作省略号

实现效果：

单行文本制作省略号

实现效果：

<!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>Document</title>
</head>
<style>
    .box{
        height: 300px;
        //1.设置元素的宽度为300像素，可根据实际需要进行调整
        width: 300px;
        background-color: aqua;
        //2.设置不换行
        white-space: nowrap;
        //3.超出隐藏
        overflow: hidden;
        //4.文本超出绘制小黑圆点（省略号）
        text-overflow: ellipsis;
    }
</style>
<body>
    <div class="box">Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi ab         neque earum, molestias quos excepturi nihil cupiditate ex esse perferendis? Cum necessitatibus est nostrum consectetur error quidem distinctio deleniti natus. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Magni natus velit dolor possimus neque eligendi fuga explicabo, libero maxime maiores, provident veritatis facilis ut aspernatur saepe officia voluptas ducimus ea. Lorem ipsum dolor sit amet consectetur adipisicing elit. Id error exercitationem eligendi veritatis esse rerum consequuntur? Numquam, aliquid voluptate temporibus dolore error autem ab culpa. Obcaecati iure consequuntur velit porro?</div>
    
</body>
</html>

多行文本制作省略号

实现效果：

<!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>Document</title>
</head>
<style>
    .box {
        //1.设置元素的宽度为300像素，可根据实际需要进行调整
        width: 300px;
        background-color: aqua;
        //2.将元素的布局模式设置为基于弹性盒子模型的布局
        display: -webkit-box;
        //3.将弹性盒子模型的方向设置为垂直方向
        -webkit-box-orient: vertical;
        //4.设置元素的文本行数为5行，即只显示5行文本内容（根据需求调整）
        -webkit-line-clamp: 5;
        //5.当文本内容超过指定行数时，隐藏超出部分内容
        overflow: hidden;
    }
</style>

<body>
    <div class="box">Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi ab neque earum, molestias quos
        excepturi nihil cupiditate ex esse perferendis? Cum necessitatibus est nostrum consectetur error quidem
        distinctio deleniti natus. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Magni natus velit dolor
        possimus neque eligendi fuga explicabo, libero maxime maiores, provident veritatis facilis ut aspernatur saepe
        officia voluptas ducimus ea. Lorem ipsum dolor sit amet consectetur adipisicing elit. Id error exercitationem
        eligendi veritatis esse rerum consequuntur? Numquam, aliquid voluptate temporibus dolore error autem ab culpa.
        Obcaecati iure consequuntur velit porro?</div>

</body>

</html>