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

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

首先要认识以下的属性：

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>

运行的结果如下：

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

如何让多行文本出现省略号？相关推荐

CSS —— 单行和多行文本实现省略号
CSS -- 单行和多行文本实现省略号一.单行文本单行文本需要添加固定宽度以兼容部分浏览器,像小程序.微信浏览器等,建议添加. width: 200px; text-overflow: ellip ...
CSS单/多行文本溢出省略号
在展示一段简介等场景下,文字内容很长,只想展示一行文字或者两三行文字信息,多余的展示省略号(...),由用户主动点击文字再进入详情页看完整介绍,此时就会用到单/多行文本溢出省略号. 单行文本溢出样 ...
css H5端多行文本实现省略号
overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; // 这是改变行数的 ...
CSS多行文本溢出省略号...显示设置
单行文本溢出... .text-over{width:200px;overflow: hidden;text-overflow:ellipsis;//文本溢出显示省略号white-space:nowr ...
css实现单行、多行文本超出省略号(...)
如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览. 实现方法: overflow: hidden; te ...
单行文本和多行文本的省略号
一.单行文本的溢出显示省略号用text-overflow:ellipsis属性来,需要加宽度width属来兼容部分浏览. overflow: hidden; text-overflow:ellipsi ...
css实现多行文本超出省略号显示，兼容所有浏览器
原文链接:https://github.com/happylindz/blog/issues/12 float 特性实现多行文本截断基本原理有个三个盒子 div,粉色盒子左浮动,浅蓝色盒子和黄色盒 ...
教你如何设置单行或多行文本超出省略号
单行文本超出出现省略号首先给用于放文本的标签元素设置一个宽度值,并设置溢出属性overflow为溢出隐藏,设置文本缩略的样式为"..."overflow: hidden; //先 ...
单行文本溢出省略号，多行文本溢出省略号，多行文本折行(可用)
1.单行文本溢出- overflow: hidden; text-overflow:ellipsis; white-space: nowrap; 2.多行文本溢出- overflow: hidden; ...

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

如何让多行文本出现省略号？相关推荐

最新文章

热门文章