css中字元換行的一些問題
- 高洛峰原創
- 2016-11-24 13:24:151605瀏覽
css中word-break可以解決這個問題，寫個測試頁面來做個筆記
css程式碼：
body{font-size:14px;}
p{ border:solid 1px red;width:200px;}
<body>
<p class="test">English中文中文中文中文中文中文Englis333hEnglishEnglishEnglish中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文 123ewewee
123EnglishEnglishEnglishEnglishEnglishEnglishEnglishEnglishEnglishEnglishEnglishEnglishEnglishEnglishEnglishEnglishEnglishEnglishEnglishEnglish
</p>
</body>
此時的運作效果如開題處所說，下面給pp標籤加點樣式
css碼
.test{ word-break:break-all;}可以發現所有的文字不管是中文還是英文還是數字都可以在包裹的p標籤的末尾位置自動強制轉行，這會有一個問題，會把本來是一個組合的字符串拆分看影響效果，再看一個
css代碼：
.test {word-break:hyphenate;}此css將可能會撐破包裹元素的字符段在斷字點進行提前換行
在所有的字元段和字元段之間的空格處換行，保留了所有字元段的完整性。撐破包裹元素
word-break還有一些屬性：
.test{ word-break:keep-all;}
如果無需保持單字的完整性，break-all-all可以解決的問題，break-all實際應用過程中不會有長度能超過一個容器寬度的單詞，所以hyphenate能解決即要單詞完整又能不撐破容器，其次在有些場景下可以採用滾動條或者overflow:hidden等來保持界面的完整。
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn