1、先要明確一點，不加word-wrap或word-break的時候，就是瀏覽器預設的時候，如果有一個單詞很長，導致一行中剩下的空間已經放不下它時，則瀏覽器會把這個單詞挪到下一行去：

2、這個長單詞還不算變態的，因為至少它沒有長到超過包裹它的元素的長度，但是如果超過了的話，就會出現下面的情況，它會溢位它的父容器外，因為這時它是不允許被截斷的。

3、這個時候word-wrap就能派上用場了。我們給這段文字加上word-wrap:break-word，為了防止長單詞溢位，就在它的內部斷句了。這就是 word-wrap:break-word 的功能。

4、long後面不是還有一段空間嗎，太浪費了，現在我們來看看使用 word-break:break-all; 後會怎麼樣。

word-wrap 是用來決定允不允許單詞內斷句的，如果不允許的話長單詞就會溢位。最重要的一點是它還是會首先嚐試挪到下一行，看看下一行的寬度夠不夠，不夠的話就進行單詞內的斷句。而word-break:break-all，它不會嘗試把長單詞挪到下一行，而是直接進行單詞內的斷句。如果想更節省空間，那就用word-break:break-all就對了！

5、white-space:pre-wrap保留空白符序列，並且正常地進行換行。

6、一般情況下，這三個屬性我們是放在一起用的。下面是textarea的編輯狀態：

失去焦點之後是非編輯狀態，如果去掉  word-break: break-all; 

顯示會出現問題：（這算是一個特例吧）

在react裡用的時候，資料有時候儲存在this.state.value，這時候它會過濾掉裡面的換行符\n，導致識別不出來。（之前遇到過一個問題就是陣列存在state裡面，它會自動過濾掉逗號）

getTextHtml() {
let text = this.props.desc
if(!text||text=='') {
return this.props.placeholder
}
let result = []
if(text) {
//換行識別
let textArr = text.replace(/\r\n/g,'\r').replace(/\n/g,
 
'\r')
let temp = textArr.split('\r')
temp.map((val, i) => {
result.push(<span key={i}>{val}<br/></span>)
        })
    }
return result
}