前端渲染文字是最常見的應用場景，可有的時候，要求能夠識别字元串中的換行。
後端出來的資料可能是這樣的，中間有一個回車符号，要求前端能夠換行顯示。
如果不處理的話
是沒辦法識别回車符号的，無法正确顯示。
對于前端來說，用css來控制是最簡單的方式。
.scf-textarea-text {
white-space: pre-wrap;
word-wrap: break-word;
word-break: break-all;
}
white-space 用來控制文本字元串類的空白和換行
normal：忽略多餘的空白，隻保留一個空白（預設）；
pre：保留白白(行為方式類似于html中的pre标簽)；
nowrap：隻保留一個空白，文本不會換行，會在在同一行上繼續，直到遇到br标簽為止。
pre-wrap：保留白白符序列，正常地進行換行；
pre-line：合并空白符序列，保留換行符；
inherit：從父元素繼承white-space屬性的值。
word-wrap 一般使用 break-word
normal 隻在允許的斷字點換行（浏覽器保持預設處理）。
break-word 在長單詞或 URL 位址内部進行換行。
word-break 一般都是用 break-all
normal 使用浏覽器預設的換行規則。
break-all 允許在單詞内換行。
keep-all 隻能在半角空格或連字元處換行。
word-warp: break-word 和 word-break:break-all 的差別
如果兩個屬性都沒有
圖1
如果隻有 word-warp: break-word ，當單詞太長時，單詞太長的部分會換到下一行。
圖2
如果還有 word-break:break-all
圖3
結論
很顯然，這兩個看似相同的屬性，其實作用完全不同。
word-warp: break-word 是将一個單詞超出的部分換到下一行。
word-break:break-all 的作用是 如果一個單詞太長，那一行剩餘空間放不下，單詞也不會另起一行開始渲染。
因為浏覽器預設的情況是 word-break:normal
如果一行文本中，剩餘的空間無法容納接下來的一個單詞，那麼那個單詞就會在另一行開始渲染第一個字母。就會出現圖2的情況