CSS3 word-break

admin發表於2019-01-23
CSSS3

CSS不是一門程式語言，未來不可知，起碼當前算不上。

難度上根不能與其他真正程式語言相比，但也不是那麼輕鬆。

很多屬性讓人感覺十分繁瑣，且不太容易精確的理解屬性值所要表達的含義。

word-break屬性可能會給不少朋友帶來上述所說的困擾，下面通過程式碼例項進行一下詳細介紹。

語法結構：

[CSS] 純文字檢視 複製程式碼
word-break:normal | break-all | keep-all | break-word

word-break由兩個單詞構成：

（1）.word：具有"單詞"的意思，注意單詞與字元的區別，單詞是由一個或者多個字元構成，看做一個整體。

（2）.break：具有"破壞"或者"換行"的意思。

此屬性做到了名副其實，用於規定單詞內換行規則，可以防止過長的單詞打破布局的情況。

屬性值解析：

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

（2）.break-all：強制將單詞截斷實現換行效果。

（3）.keep-all：規定不允許字斷開。

（4）.break-word：此屬性值尚處於實驗階段，用於確保文字不會溢位。

對屬性值的介紹非常簡短，後面會結合程式碼例項詳細闡述各個屬性值的具體功能。

瀏覽器支援：

（1）.IE瀏覽器支援此屬性。

（2）.edge瀏覽器支援此屬性。

（3）.谷歌瀏覽器支援此屬性。

（4）.火狐瀏覽器支援此屬性。

（5）.opera瀏覽器支援此屬性。

（6）.safria瀏覽器支援此屬性。

所有瀏覽器都支援此屬性，但是屬性值存在著一定瀏覽器支援問題：

（1）.火狐和IE不支援break-word。

（2）.移動端瀏覽器也對屬性值支援度也不同，本文不再列舉，可以自行查詢。

程式碼例項如下：

[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:100px;
  border:1px solid blue;
  margin-top:5px;
} 
</style> 
</head> 
<body> 
<div>I am a good student ,and you?</div> 
</body> 
</html>

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

a:3:{s:3:\"pic\";s:43:\"portal/201901/23/222259vksthuens5r9un9m.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

程式碼分析如下：

（1）.word-break預設值是normal，可以省略，保持瀏覽器的預設處理。

（2）.預設規則是，只允許單詞間換行，不允許單詞內換行（將數字看做單詞，其他屬性值也是，後面不再強調），比如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;
  border:1px solid blue;
  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/201901/23/222325t9uaca9scmrsn4zc.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

"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:50px;
  border:1px solid blue;
  margin-top:5px;
  word-break: break-all;
} 
</style> 
</head> 
<body> 
<div>I am a good student ,and you?</div> 
</body> 
</html>

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

a:3:{s:3:\"pic\";s:43:\"portal/201901/23/222348d8x18zk1wzqwr2xx.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

（1）.屬性值名稱非常霸氣，所有的內容必須聽話。

（2）.如果單詞顯示不開，那麼必須折斷換行，不會給"全屍"，有點恐怖的感覺。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<style type="text/css">
.en{ 
  width:150px; 
  height:100px; 
  border:1px solid blue; 
  margin-top:5px; 
  word-break:keep-all; 
} 
.cn{ 
  width:150px; 
  height:100px; 
  border:1px solid blue; 
  margin-top:5px; 
  word-break:keep-all; 
} 
</style> 
</head> 
<body> 
  <div class="en">I am a good student ,and you?</div> 
  <div class="cn">螞蟻部落歡迎您，分享和互助是進步最大的源動力。</div> 
</body> 
</html>

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

a:3:{s:3:\"pic\";s:43:\"portal/201901/23/222416bpgphnrlql22ppg9.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

程式碼分析如下：

（1）.keep-all屬性值作用於單詞與normal的功能相同。

（2）.對於中文、韓文或者日文，如果緊挨在一起，不允許換行，執行效果體現了這一點。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<style type="text/css">
.en{ 
  width:150px; 
  height:100px; 
  border:1px solid blue; 
  margin-top:5px; 
  word-break:break-word; 
} 
.cn{ 
  width:150px; 
  height:100px; 
  border:1px solid blue; 
  margin-top:5px; 
  word-break:break-word; 
} 
</style> 
</head> 
<body> 
  <div class="en">I am a good AAAAAAAAAAAAAAAAAAA ,and you?</div> 
  <div class="cn">螞蟻部落歡迎您，分享和互助是進步最大的源動力。</div> 
</body> 
</html>

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

a:3:{s:3:\"pic\";s:43:\"portal/201901/23/222443yk9tth5z0m66duvm.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

程式碼分析如下：

（1）.break-word屬性值尚屬實驗性質，未被標準化。

（2）.此屬性值可以確保文字不會溢位。

（3）.如果單詞過長會換行顯示，如果在新的一行依然無法完整顯示，那麼就將其折斷換行，對於中文、韓文或者日本的處理則與normal相同，顯示不開就換行。

相關文章