CSS控製文字的換行與裁剪

這次帶給大家CSS控製文字的換行與裁剪，CSS控製文字換行與裁剪的注意事項有哪些，下面就是實戰案例，一起來看一下。

關於換行、裁剪的一些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; 
相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！ 
推薦閱讀：

用CSS3實作滑鼠浮動放大圖片

IE8下的nth-child()相容問題如何處理

在CSS邊界線消失如何處理
#
以上是CSS控製文字的換行與裁剪的詳細內容。更多資訊請關注PHP中文網其他相關文章！