首頁 > web前端 > css教學 > css中字元換行的一些問題

css中字元換行的一些問題

高洛峰
發布: 2016-11-24 13:24:15
原創
1566 人瀏覽過

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還有一些屬性:

 

css代碼:

 .test{ word-break:keep-all;}
登入後複製

如果無需保持單字的完整性,break-all-all可以解決的問題,break-all實際應用過程中不會有長度能超過一個容器寬度的單詞,所以hyphenate能解決即要單詞完整又能不撐破容器,其次在有些場景下可以採用滾動條或者overflow:hidden等來保持界面的完整。

相關標籤:
css
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板