如何让多行文本出现省略号？

最新推荐文章于 2024-05-21 14:00:56 发布

cv程序猿

最新推荐文章于 2024-05-21 14:00:56 发布

阅读量2.8k

点赞数 5

本文链接：https://blog.csdn.net/IT2107/article/details/119546221

版权

在很多时候，我们写页面时，当我们的文本过多时，太多文字会影响页面的美观，这时我们就要学会压缩文本，省略掉多余的文本，下面我要讲的是，如何让多余文本省略。

首先要认识以下的属性：

1.text-overflow:ellipsis;这是溢出文本显示省略号的必要属性。

2、容器宽度：width：value；（px、%，都可以）（必须要有宽度）；

3、主要是控制父容器里面子元素的排列方式：display: -webkit-box;

4、实现限制文字显示多少行，多余的用... ： -webkit-line-clamp: 2;

5、属性规定框的子元素应该被水平或垂直排列。-webkit-box-orient: vertical;

6、overflow : hidden;文本溢出隐藏。

下面是一个简单的例子：

<!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>
        .box{
            height: 500px;
            width: 500px;
            /* 设置大盒子的边框 */
            border: solid 1px red;
            /* 让大盒子水平居中 */
            margin: auto;
            /* 让大盒子距离浏览器顶部100像素 */
            margin-top: 50px;
        }
        .box p{
            /* 这里P元素的宽高克自行设置 */
            
            /* 要想文本过多时,不想让文字超出盒子,必须要设置盒子的宽度 */
            width: 500;
            /* 除了上面一定要设置宽度外,还需要满足下面的条件 */
            /* 文本显示省略号 */
            text-overflow: ellipsis;
            /* 溢出的内容将它隐藏 */
            overflow : hidden;
            /* 主要控制父元素容器里面子元素的排列方式 */
            display: -webkit-box;
            /* 实现限制文字显示多少行,也就是说要多少行是出现省略号,我这里设置两行就让文本出现省略号 */
            -webkit-line-clamp: 2;
            /* 属性规定框的子元素应该被水平或垂直排列 */
            -webkit-box-orient: vertical;

           
            
        }
    </style>
</head>
<body>
    <div class="box">
        <p>
            今天又是一个雨天，我坐在屋檐底下，随手拿起一本书，看到了一篇文章，大概是这样的：

            在中秋节的一天，老师带了一些月饼，分给每人一块，大家正美美的吃着月饼时，老师笑眯眯的嘴唇上，突然变得乌紫，脸色苍白，大家打电话的打电话，忙的忙，老师被送到了医院，教室里的同学们看着月饼，泪水在打转，百感交集……【星火作文网 www.easyzw.com】
            
            大家知道吗？天底下有这样一群人：
            
            他们不是农民，却播种希望；
            
            他们不是画家，却描绘辉煌;
            
            他们不是建筑师，却设计未来；
            
            这群人就是老师。如果把人生比作月饼，那么，我们是在制作之中，而父母是创始人，老师就是制作者，经过他们的手，我们变成了完整的月饼，但是还没有馅啊，这就是老师把知识给了我们，充实了我们的大脑，又给我们添加了一些美味的“馅”，使我们一个个都变成了“中吃的月饼”，但是为了美化我们的外表，又和父母一起，帮我们的把一生打好了基础，在以后的人生到道路上，人们就是品尝师，用“嘴巴”尝出我们的“味道”，如果被“识货的”人品尝到了，那就是前途无量啊，如果你很平常，会被人遗忘！想要成为一个被人们相传的“月饼”，那么困难、坎坷和痛苦都是一道难关，如果你能通过这几道“工序“，你必定方为人上人，所以不要嫉妒别人，要想想自己，比如在教室里，你是成绩不好的同学，要自己想想，同样都是老师教的，为什么还有如此大的区分，是自己不够努力，还是不够坚定，自身有什么不足之处，加以改正。世界上没有两个完全一样的人，也就有60亿不同的生命，世界才会如此丰富。
            
            想了这么多，看着天空依然是大雨滂沱，电闪雷鸣，大树绿的刺眼。忽忽而过的风对我耳语：“岁月如我这般轻盈！”雨对我歌唱：“生命是我这样的淋漓尽致！”雷对我咆哮：“生命是我这样的铿锵有力！”电对我眨眼：“生命是如此绚丽！”
            
            让我们去读懂生命，读懂世间万物，读懂人们美好心灵。
        </p>
    </div>
</body>
</html>

运行的结果如下：

好了，以上就是如何让溢出文本出现省略号的案例，希望可以帮助到你。

cv程序猿

关注

5
点赞
踩
10

收藏

觉得还不错? 一键收藏
1
评论
如何让多行文本出现省略号？

在很多时候，我们写页面时，当我们的文本过多时，太多文字会影响页面的美观，这时我们就要学会压缩文本，省略掉多余的文本，下面我要讲的是，如何让多余文本省略。首先要认识以下的属性： 1.text-overflow:ellipsis;这是溢出文本显示省略号的必要属性。 2、容器宽度：width：value；（px、%，都可以）（必须要有宽度）；3、主要是控制父容器里面子元素的排列方式：display: -webkit-box;4、实现...
复制链接

扫一扫