首頁 > web前端 > html教學 > 文字别乱跑~_html/css_WEB-ITnose

文字别乱跑~_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
發布: 2016-06-24 11:54:27
原創
1330 人瀏覽過

  为了让网页布局规整,我们经常要控制文字段落的长度和高度。

  当我们信心满满的为这些文字画了一个DIV框子后,却发现这些文字远比我们想象中的调皮。

  

 <div style="width:800px;height:50px;border:1px solid red;">  调皮的文字捣蛋的文字。调皮的文字捣蛋的文字。调皮的文字捣蛋的文字。调皮的文字捣蛋的文字。调皮的文字捣蛋的文字。调皮的文字捣蛋的文字。调皮的文字捣蛋的文字。调皮的文字捣蛋的文字。调皮的文字捣蛋的文字。调皮的文字捣蛋的文字。调皮的文字捣蛋的文字。调皮的文字捣蛋的   文字。调皮的文字捣蛋的文字。调皮的文字捣蛋的文字。调皮的文字捣蛋的文字。调皮的文字捣蛋的文字。调皮的文字捣蛋的文字。 </div>
登入後複製

运行结果如下:

 

这时我们在div中加入 overflow:hidden;让跑出来的字隐藏掉,如图

看着还是别捏,再加一个 white-space:nowrap,如图:

还是不够美观,再来个 text-overflow:ellipsis,如图:

感觉好很多....

好了,让大牛笑话了,其实我是来提问的:如何才能让文字显示三行,并且在最后一行的末尾用省略号代替溢出的文字???

恳请赐教!

 

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
如何在HTML/CSS中嵌入背景影片?
來自於 1970-01-01 08:00:00
0
0
0
java - springboot新手學習
來自於 1970-01-01 08:00:00
0
0
0
spring - JavaWeb中 Service 層的事務問題
來自於 1970-01-01 08:00:00
0
0
0
java - C語言演算法題-韓信點兵 解法?
來自於 1970-01-01 08:00:00
0
0
0
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板