首页 > 代码库 > 文字别乱跑~
文字别乱跑~
为了让网页布局规整,我们经常要控制文字段落的长度和高度。
当我们信心满满的为这些文字画了一个DIV框子后,却发现这些文字远比我们想象中的调皮。
<div style="width:800px;height:50px;border:1px solid red;">
调皮的文字捣蛋的文字。调皮的文字捣蛋的文字。调皮的文字捣蛋的文字。调皮的文字捣蛋的文字。调皮的文字捣蛋的文字。调皮的文字捣蛋的文字。调皮的文字捣蛋的文字。调皮的文字捣蛋的文字。调皮的文字捣蛋的文字。调皮的文字捣蛋的文字。调皮的文字捣蛋的文字。调皮的文字捣蛋的 文字。调皮的文字捣蛋的文字。调皮的文字捣蛋的文字。调皮的文字捣蛋的文字。调皮的文字捣蛋的文字。调皮的文字捣蛋的文字。
</div>
运行结果如下:
这时我们在div中加入 overflow:hidden;让跑出来的字隐藏掉,如图
看着还是别捏,再加一个 white-space:nowrap,如图:
还是不够美观,再来个 text-overflow:ellipsis,如图:
感觉好很多....
好了,让大牛笑话了,其实我是来提问的:如何才能让文字显示三行,并且在最后一行的末尾用省略号代替溢出的文字???
恳请赐教!
文字别乱跑~
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。