首頁 >web前端 >css教學 >CSS控製文字換行、裁剪

CSS控製文字換行、裁剪

高洛峰
高洛峰原創
2017-02-28 14:08:271699瀏覽

關於換行、裁剪的一些CSS屬性

#word-wrap: normal | break-word

normal 正常換行,內容可以撐破容器,例如長單字或長數字的情況
break-word 以單字作為換行依據,如果需要,單字內部允許斷行

word-break: normal | break-all | keep-all

normal 正常換行,內容可以撐破容器,例如長單字或長數字的情況

break-all 以字母作為換行依據

keep-all中英文下和normal相同

white-space: normal || pre || nowrap || pre-line || pre-wrap || inherit

normal預設值,空白會被瀏覽器忽略

pre 空白會被瀏覽器保留,其行為方式類似HTML 中的

 標籤

nowrap 文字不會換行,文字會在同一行上,直到遇到
標籤為止

pre-wrap 保留空格符號序列,但是正常地進行換行(IE7-不支援)

pre-line 合併空白符號序列,但保留換行符(IE7-不支援)

inherit規定應該從父元素繼承white-space 屬性的值(IE不支援)

應用:

文字溢出顯示省略標記(...):

text-overflow: ellipsis; 
overflow: hidden; 
white-space: nowrap; 

#文字換行:

/* 以單字作為換行依據*/ 
word-wrap: break-word; 
word-break : normal; 
/* 以字母作為換行依據*/ 
word-break: break-all; 

文字強制不換行:

white-space: nowrap; 

以上所述是小編給大家介紹的CSS控製文字換行、裁剪,希望對大家有幫助,如果大家有任何疑問請給我留言,小編會及時回覆大家的。在此也非常感謝大家對PHP中文網的支持!

更多CSS控製文字換行、裁剪相關文章請關注PHP中文網!


#
陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn