當(dāng)一個塊狀元素設(shè)置了寬度边翁，并且其中的文本是根據(jù)接口返回的數(shù)據(jù)進行填充和展示時洒放，因為傳輸?shù)臄?shù)據(jù)有可能是不可靠的顾画，所以在展示時必須要考慮數(shù)據(jù)的極限值，進行各種奇怪數(shù)據(jù)以及數(shù)據(jù)極限值的展示巷帝，考慮此情況下頁面是否會存在布局錯亂的問題忌卤，這個稱為破壞性測試。
一楞泼、一般而言驰徊，考慮應(yīng)用場景的處理方式通常有：
- 強制文本一行展示，超出一行范圍的文本用省略號表示堕阔；
- 設(shè)置文本一行或多行（規(guī)定行）展示棍厂，超出規(guī)定范圍的文本直接隱藏；
- 自動換行超陆，過長英文單詞進行強制斷行勋桶；
二、簡單歸納下css關(guān)于設(shè)置換行的樣式屬性：
1.white-space: normal | pre | nowrap | pre-wrap | pre-line | inherit;
white-space 屬性設(shè)置如何處理元素內(nèi)的空白
設(shè)值說明：
normal 默認侥猬。空白會被瀏覽器忽略捐韩。
pre 空白會被瀏覽器保留退唠。其行為方式類似 HTML 中的 pre 標簽。
nowrap文本不會換行荤胁，文本會在在同一行上繼續(xù)瞧预，直到遇到 br 標簽為止。
pre-wrap 保留空白符序列仅政，但是正常地進行換行垢油。
pre-line 合并空白符序列，但是保留換行符圆丹。
inherit 規(guī)定應(yīng)該從父元素繼承 white-space 屬性的值滩愁。
2.word-wrap: normal|break-word;
word-wrap 屬性用來標明是否允許瀏覽器在單詞內(nèi)進行斷句，這是為了防止當(dāng)一個字符串太長而找不到它的自然斷句點時產(chǎn)生溢出現(xiàn)象辫封。
設(shè)置說明：
normal: 只在允許的斷字點換行(瀏覽器保持默認處理)
break-word:在長單詞或URL地址內(nèi)部進行換行
3.word-break: normal|break-all|keep-all;
word-break 屬性用來標明怎么樣進行單詞內(nèi)的斷句硝枉。
設(shè)值說明：
normal：使用瀏覽器默認的換行規(guī)則廉丽。
break-all:允許在單詞內(nèi)換行
keep-all:只能在半角空格或連字符處換行
三、相應(yīng)場景處理方式的CSS樣式
- 超出文本部分隱藏
.nowrap{
overflow:hidden;
}
- 允許單詞內(nèi)斷句妻味，首先會嘗試挪到下一行正压，看看下一行的寬度夠不夠，不夠的話就進行單詞內(nèi)的斷句
.breakword{
word-wrap: break-word;
}
- 斷句時责球，不會把長單詞挪到下一行焦履，而是直接進行單詞內(nèi)的斷句
.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;
}
/* 允許單詞內(nèi)斷句嘉裤，首先會嘗試挪到下一行，看看下一行的寬度夠不夠校套，
不夠的話就進行單詞內(nèi)的斷句 */
.breakword{
word-wrap: break-word;
}
/* 斷句時价脾，不會把長單詞挪到下一行，而是直接進行單詞內(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.進行長單詞判斷再單詞內(nèi)斷句換行：</p>
<p class = "breakword">wordwrap:break-word;absavhsafhuafdfbjhfvsalguvfaihui</p>
<p>3.直接進行單詞內(nèi)斷句換行：</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>
效果圖如下：
