一、前言
需要實現一個文字環繞圖片的效果，心想so easy嘛。
1）代碼部分
<style> .img-left { border: 3px solid #005588; width:300px;
} .img-left img { float:left; /* 對圖片進行浮動就可以實現了 */ width:150px;
}
</style>
<div class="img-left">
<img src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png" alt="pic"/> 這是一段中文這是一段中文這是一段中文這是一段中文這是一段中文這是一段中文這是一段中文這是一段中文這是一段中文這是一段中文這是一段中文這是一段中文這是一段中文這是一段中文這是一段中文這是一段中文這是一段中文這是一段中文這是一段中文 <div style="clear:both;"></div>
</div>
2）效果圖
很容易就出來想要的效果了。最關鍵的代碼：對圖片進行左浮動就可以了，這不是挺簡單的嘛。
二、遇到的問題
當把中間的文字替換成連續的英文字母時，出現問題了，如圖
於是查找相關資料，測試結果后發現：
瀏覽器默認解析英文或者數字時，是按照單詞進行解析。
也就是說，每個單詞是一個整體，遇到空間不足時，不會對單詞進行拆分。
所以才會出現上面這種情況。
上個對比圖
三、解決方法
思考：CSS里面有沒有相關的屬性，可以對文字進行強制換行呢？
答案當然是有的：word-break: break-all;
這樣就可以解決問題了。
四、后記：word-wrap、word-break
在查找資料的時候，發現還有個屬性：word-wrap：break-word; 這咋還出現重復屬性了呢？
其實不然，又是一通查找資料，發現這倆還是有區別的：
1) word-wrap : break-word ;
--允許長單詞換行到下一行。
當一個單詞長度超過div的寬度時，默認是不會換行的：如下圖
如果設置word-wrap : break-word; 這個單詞就會進行換行顯示
2）word-break : break-all;
-- 是否對單詞進行斷詞處理。
--個人理解就是： 它會把一個單詞的每個字母拆分成獨立的單元，
這樣就可以把它填充到每個地方，所以才能達到文字環繞圖片的效果。
有篇文章對這兩者的區別做了很好的介紹：《你真的了解word-wrap和word-break的區別嗎？》