css代碼：
body{font-size:14px;} p{ border:solid 1px red;width:200px;} <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
