當一個塊狀元素設置了寬度，并且其中的文本是根據接口返回的數據進行填充和展示時，因為傳輸的數據有可能是不可靠的，所以在展示時必須要考慮數據的極限值，進行各種奇怪數據以及數據極限值的展示，考慮此情況下頁面是否會存在布局錯亂的問題，這個稱為破壞性測試。
一、一般而言，考慮應用場景的處理方式通常有：
- 強制文本一行展示，超出一行范圍的文本用省略號表示；
- 設置文本一行或多行（規定行）展示，超出規定范圍的文本直接隱藏；
- 自動換行，過長英文單詞進行強制斷行；
二、簡單歸納下css關于設置換行的樣式屬性：
1.white-space: normal | pre | nowrap | pre-wrap | pre-line | inherit;
white-space 屬性設置如何處理元素內的空白
設值說明：
normal 默認。空白會被瀏覽器忽略。
pre 空白會被瀏覽器保留。其行為方式類似 HTML 中的 pre 標簽。
nowrap文本不會換行，文本會在在同一行上繼續，直到遇到 br 標簽為止。
pre-wrap 保留空白符序列，但是正常地進行換行。
pre-line 合并空白符序列，但是保留換行符。
inherit 規定應該從父元素繼承 white-space 屬性的值。
2.word-wrap: normal|break-word;
word-wrap 屬性用來標明是否允許瀏覽器在單詞內進行斷句，這是為了防止當一個字符串太長而找不到它的自然斷句點時產生溢出現象。
設置說明：
normal: 只在允許的斷字點換行(瀏覽器保持默認處理)
break-word:在長單詞或URL地址內部進行換行
3.word-break: normal|break-all|keep-all;
word-break 屬性用來標明怎么樣進行單詞內的斷句。
設值說明：
normal：使用瀏覽器默認的換行規則。
break-all:允許在單詞內換行
keep-all:只能在半角空格或連字符處換行
三、相應場景處理方式的CSS樣式
- 超出文本部分隱藏
.nowrap{
overflow:hidden;
}
- 允許單詞內斷句，首先會嘗試挪到下一行，看看下一行的寬度夠不夠，不夠的話就進行單詞內的斷句
.breakword{
word-wrap: break-word;
}
- 斷句時，不會把長單詞挪到下一行，而是直接進行單詞內的斷句
.breakAll{
word-break:break-all;
}
- 強制不換行，超出文本以省略號顯示
.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";
}
/* 強制不換行 */
.nowrap{
overflow:hidden;
}
/* 允許單詞內斷句，首先會嘗試挪到下一行，看看下一行的寬度夠不夠，
不夠的話就進行單詞內的斷句 */
.breakword{
word-wrap: break-word;
}
/* 斷句時，不會把長單詞挪到下一行，而是直接進行單詞內的斷句 */
.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.進行長單詞判斷再單詞內斷句換行：</p>
<p class = "breakword">wordwrap:break-word;absavhsafhuafdfbjhfvsalguvfaihui</p>
<p>3.直接進行單詞內斷句換行：</p>
<p class = "breakAll">wordwrap:break-word;absavhsafhuafdfbjhfvsalguvfaihuivf</p>
<p>4.默認情況下的自動換行：</p>
<p class = "normal">wordwrap:breakword;absavhsafhuafdfbjhfvsalguvfaihuivfsa</p>
<p>5.強制一行，超出文本省略號顯示：</p>
<p class = "ellipsis">wordwrap:breakword;absavhsafhuafdfbjhfvsalguvfaihuivfsab</p>
</div>
</body>
</html>
效果圖如下：
示例效果圖
