CSS3 overflow-wrap

admin發表於2017-02-23
CSSS3

overflow-wrap屬性規定是否允許在單詞內進行斷行，也就是將一個單詞從其內部折斷。

可以防止字串過長導致的溢位現象，可能不少朋友感覺此屬性功能與其他CSS屬性功能相似。

的確如此，與兩個屬性與其功能相似，甚至是一模一樣：

（1）.word-wrap：此屬性當前是overflow-wrap別名，word-wrap原本是IE瀏覽器的私有屬性，但是各個瀏覽器對其支援相當好，當前CSS3已經將其重新命名為overflow-wrap。

（2）.word-break：此屬性功能的確與overflow-wrap非常相似，但是也有區別的。

更多內容參閱如下兩篇文章：

（1）.word-break屬性參閱CSS3 word-break一章節。

（2）.與word-break屬性區別參閱overflow-wrap與word-break 區別一章節。

下面進入正題，將通過程式碼例項詳細介紹一下此屬性的用法。

語法結構：

[CSS] 純文字檢視 複製程式碼
overflow-wrap:normal|break-word|anywhere

引數解析：

（1）.normal：預設值，保持瀏覽器的預設處理。

（2）.break-word：規定當字串過長時，允許在單詞內斷行。

（3）.anywhere：規定當字串過長時，允許在單詞內斷行，與break-word肯定有不同，後面介紹。

前面對兩個屬性值進行簡短陳述，下面通過程式碼例項對它們進行詳細解釋。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<style type="text/css">
div{
  width:150px;
  height:60px;
  margin-top:5px;
  background-color: #ccc;
} 
</style> 
</head> 
<body> 
<div>I am a good student ,and you?</div> 
</body> 
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201902/05/234754echicds6s8roonxu.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上述程式碼並沒有顯式定義overflow-wrap屬性，所以預設值是normal。如果一行的空間無法容納整個字串，那麼就會在一個恰當的位置換行，比如上述程式碼中，很明顯第一行無法容納整個字串，最後的空隙也無法容納單詞"student"，會在單詞之間的空隙處斷行顯示，單詞不會被從內部折斷。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<style type="text/css">
div{
  width:150px;
  height:70px;
  background-color: #ccc;
  margin-top:5px;
} 
</style> 
</head> 
<body> 
<div>I am a good AAAAAAAAAAAAAAAAAAAAA ,and you?</div> 
</body> 
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201902/05/234817oajjac62x6z6j16e.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

有時候會遇到過長的單詞或者類似連續的數字。

那麼單詞會換行顯示，如果換行後也無法被完全容納，也不會折斷換行。

也就是說，當屬性值為normal的時候，是不允許單詞內斷行的。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<style type="text/css">
div{
  width:150px;
  height:90px;
  background-color: #ccc;
  margin-top:5px;
  overflow-wrap:break-word;
} 
</style> 
</head> 
<body> 
<div>I am a good student ,and you?</div> 
<div>I am a good AAAAAAAAAAAAAAAAAAAAA ,and you?</div> 
</body> 
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201902/05/234841l8cqfqiiqczbqszd.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

overflow-wrap屬性的作用是規定是否允許字串進行斷行以防止溢位。

上述程式碼設定屬性值為break-word，從屬性值的名稱可以猜測，它允許單詞內斷行以防止溢位。

但是有一點的寬容度，會給過長的單詞一次機會，比如"student"在第一行已經無法容納，所以再給它一次機會，讓其換行顯示。正所謂再一不再二，"AAA..."實在太長了，雖然給它一次換行的機會，但是第二個行依然無法將其容納，所以會將其斷行顯示，以防止溢位。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<style type="text/css">
div{
  width:150px;
  height:90px;
  background-color: #ccc;
  margin-top:5px;
  overflow-wrap:anywhere;
} 
</style> 
</head> 
<body> 
<div>I am a good student ,and you?</div> 
<div>I am a good AAAAAAAAAAAAAAAAAAAAA ,and you?</div> 
</body> 
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201902/05/234905poia0fbyaibva1fa.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

從執行效果來看，好像anywhere屬性值與break-word屬性值表現完全一樣。

其實兩者還是有差別，看如下程式碼例項：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<style type="text/css">
div{
  width:-moz-min-content;
  height:190px;
  background-color: #ccc;
  margin-top:5px;
  overflow-wrap:break-word;
} 
</style> 
</head> 
<body> 
<div>I am a good stud</div> 
</body> 
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201902/05/234933dj21lkgu12dfuugv.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

關於min-content屬性值的具體作用可以參閱CSS max/min-content一章節。

特別說明：當前只有火狐瀏覽器支援anywhere屬性值，當然隨著時間的推移，支援度隨時發生變化。

將overflow-wrap屬性值設定為anywhere，執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201902/05/234955pvh22ix2mm2hlhzf.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

程式碼分析如下：

（1）.overflow-wrap值為break-word，width值為min-content時，斷行發生在單詞間空白間隔處。

（2）.overflow-wrap值為anywhere，width值為min-content時，斷行可以發生在構成單詞的任意字元處。

最後再解答一個問題，可能有朋友會問，漢字是如何斷行呢，漢字天生就是被斷行的命，只要寬度容納不開，立馬斷行，從來不考慮其他條件。

相關文章