为了让网页布局规整，我们经常要控制文字段落的长度和高度。
当我们信心满满的为这些文字画了一个DIV框子后，却发现这些文字远比我们想象中的调皮。
<div style="width:800px;height:50px;border:1px solid red;"> 调皮的文字捣蛋的文字。调皮的文字捣蛋的文字。调皮的文字捣蛋的文字。调皮的文字捣蛋的文字。调皮的文字捣蛋的文字。调皮的文字捣蛋的文字。调皮的文字捣蛋的文字。调皮的文字捣蛋的文字。调皮的文字捣蛋的文字。调皮的文字捣蛋的文字。调皮的文字捣蛋的文字。调皮的文字捣蛋的 文字。调皮的文字捣蛋的文字。调皮的文字捣蛋的文字。调皮的文字捣蛋的文字。调皮的文字捣蛋的文字。调皮的文字捣蛋的文字。 </div>
运行结果如下：
立即学习“前端免费学习笔记（深入）”；
这时我们在div中加入 overflow:hidden;让跑出来的字隐藏掉,如图
看着还是别捏,再加一个 white-space:nowrap,如图:
还是不够美观,再来个 text-overflow:ellipsis,如图:
感觉好很多....
好了,让大牛笑话了,其实我是来提问的:如何才能让文字显示三行,并且在最后一行的末尾用省略号代替溢出的文字???
恳请赐教!
立即学习“前端免费学习笔记（深入）”；
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
619
收藏
