當(dāng)一個塊狀元素設(shè)置了寬度，并且其中的文本是根據(jù)接口返回的數(shù)據(jù)進(jìn)行填充和展示時，因為傳輸?shù)臄?shù)據(jù)有可能是不可靠的，所以在展示時必須要考慮數(shù)據(jù)的極限值，進(jìn)行各種奇怪?jǐn)?shù)據(jù)以及數(shù)據(jù)極限值的展示，考慮此情況下頁面是否會存在布局錯亂的問題，這個稱為破壞性測試。
一、一般而言，考慮應(yīng)用場景的處理方式通常有：
- 強(qiáng)制文本一行展示，超出一行范圍的文本用省略號表示；
- 設(shè)置文本一行或多行（規(guī)定行）展示，超出規(guī)定范圍的文本直接隱藏；
- 自動換行，過長英文單詞進(jìn)行強(qiáng)制斷行；
二、簡單歸納下css關(guān)于設(shè)置換行的樣式屬性：
1.white-space: normal | pre | nowrap | pre-wrap | pre-line | inherit;
white-space 屬性設(shè)置如何處理元素內(nèi)的空白
設(shè)值說明：
normal 默認(rèn)。空白會被瀏覽器忽略。
pre 空白會被瀏覽器保留。其行為方式類似 HTML 中的 pre 標(biāo)簽。
nowrap文本不會換行，文本會在在同一行上繼續(xù)，直到遇到 br 標(biāo)簽為止。
pre-wrap 保留空白符序列，但是正常地進(jìn)行換行。
pre-line 合并空白符序列，但是保留換行符。
inherit 規(guī)定應(yīng)該從父元素繼承 white-space 屬性的值。
2.word-wrap: normal|break-word;
word-wrap 屬性用來標(biāo)明是否允許瀏覽器在單詞內(nèi)進(jìn)行斷句，這是為了防止當(dāng)一個字符串太長而找不到它的自然斷句點時產(chǎn)生溢出現(xiàn)象。
設(shè)置說明：
normal: 只在允許的斷字點換行(瀏覽器保持默認(rèn)處理)
break-word:在長單詞或URL地址內(nèi)部進(jìn)行換行
3.word-break: normal|break-all|keep-all;
word-break 屬性用來標(biāo)明怎么樣進(jìn)行單詞內(nèi)的斷句。
設(shè)值說明：
normal：使用瀏覽器默認(rèn)的換行規(guī)則。
break-all:允許在單詞內(nèi)換行
keep-all:只能在半角空格或連字符處換行
三、相應(yīng)場景處理方式的CSS樣式
- 超出文本部分隱藏
.nowrap{
overflow:hidden;
}
- 允許單詞內(nèi)斷句，首先會嘗試挪到下一行，看看下一行的寬度夠不夠，不夠的話就進(jìn)行單詞內(nèi)的斷句
.breakword{
word-wrap: break-word;
}
- 斷句時，不會把長單詞挪到下一行，而是直接進(jìn)行單詞內(nèi)的斷句
.breakAll{
word-break:break-all;
}
- 強(qiáng)制不換行，超出文本以省略號顯示
.ellipsis{
white-space:nowrap;
overflow:hidden;
text-overflow: ellipsis;
}
四、完整示例代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>換行與不換行演示</title>
<style>
.word{
background:#E4FFE9;
width:250px;
margin:50px auto;
padding:20px;
font-family:"microsoft yahei";
}
/* 強(qiáng)制不換行 */
.nowrap{
overflow:hidden;
}
/* 允許單詞內(nèi)斷句，首先會嘗試挪到下一行，看看下一行的寬度夠不夠，
不夠的話就進(jìn)行單詞內(nèi)的斷句 */
.breakword{
word-wrap: break-word;
}
/* 斷句時，不會把長單詞挪到下一行，而是直接進(jìn)行單詞內(nèi)的斷句 */
.breakAll{
word-break:break-all;
}
/* 超出部分顯示省略號 */
.ellipsis{
white-space:nowrap;
overflow:hidden;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<div class = "word">
<p>1.一行，超出文本隱藏：</p>
<p class = "nowrap">wordwrap:breakword;absavhsafhuafdfbjhfvsalguvfaihuivfsab</p>
<p>2.進(jìn)行長單詞判斷再單詞內(nèi)斷句換行：</p>
<p class = "breakword">wordwrap:break-word;absavhsafhuafdfbjhfvsalguvfaihui</p>
<p>3.直接進(jìn)行單詞內(nèi)斷句換行：</p>
<p class = "breakAll">wordwrap:break-word;absavhsafhuafdfbjhfvsalguvfaihuivf</p>
<p>4.默認(rèn)情況下的自動換行：</p>
<p class = "normal">wordwrap:breakword;absavhsafhuafdfbjhfvsalguvfaihuivfsa</p>
<p>5.強(qiáng)制一行，超出文本省略號顯示：</p>
<p class = "ellipsis">wordwrap:breakword;absavhsafhuafdfbjhfvsalguvfaihuivfsab</p>
</div>
</body>
</html>
效果圖如下：
