我們在處理文章的內容的過程中由於文章內容混雜有中文、英文、數字等其他字元，而我們常見的英文和數字是無法在包裹元素中自動換行，這往往會導致元素被撐破，如下圖所示：
css中word-break可以解決這個問題，寫個測試頁面來做個筆記
css代碼：
body{font-size:14px;} p{ border:solid 1px red;width:200px;}
html代碼：
<body> <p class="test">English中文中文中文中文中文中文Englis333hEnglishEnglishEnglish中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文 123ewewee 123EnglishEnglishEnglishEnglishEnglishEnglishEnglishEnglishEnglishEnglishEnglishEnglishEnglishEnglishEnglishEnglishEnglishEnglishEnglishEnglish </p></body>
此時的運行效果如開題處所說，下面給p標籤加點樣式
css代碼：
.test{ word-break:break-all;}
效果如下：
可以發現所有的文字不管是中文還是英文還是數字都可以在包裹的p標籤的末尾位置自動強制轉行，這會有一個問題，會把本來是一個組合的字串拆分看影響效果，再看一個
css代碼：
.test {word-break:hyphenate;}
效果如下：
此css將可能會撐破包裹元素的字元段在斷字點進行提前換行
再看
css代碼：
.test{ word-break:keep-all;}
效果如下：
在所有的字元段和字元段之間的空格處換行，保留了所有字元段的完整性。撐破包裹元素
word-break還有一些屬性：
css代碼：
.test{ word-break:normal;}/*瀏覽器預設換行*/
如果無需保持單詞的完整性，break-all可以解決撐破容器的問題，因為在實際應用過程中不會有長度能超過一個容器寬度的單詞，所以 hyphenate能解決即要單詞完整又能不撐破容器，其次在有些情境下可以採用捲軸或者overflow:hidden等來保持介面的完整。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
