[CSS+HTML]文字過長換行、或是達到強迫不換行

有時候會遇到英文單字太長、或是有含到網址...

有時候 RWD 網頁頁面上會遇到英文單字太長、或是有包含到網址,導致畫面卷軸出現,就可以利用 word-wrap 
 

CSS 文字過長導致畫面跑版的解決方式

CSS 語法
.tset{
    word-wrap:break-word; /*單字過長超過畫面的寬度,則換行*/
    word-break: break-all; /*若一單字過長超過畫面的寬度,則切斷單字,並換行*/
}
HTML 語法
<div class="tset">
I am a very longlonglonglonglonglonglonglonglonglong word
</div>
 

CSS -相關文字換行屬性參數

文字強迫換行: word-break: break-all;  /*字過長,則將單字切斷,並換行*/
依單字換行: word-wrap:break-word; /*若一個單字過長,超過畫面的寬度,則將單字換行(不切斷單字) 在長單詞或URL 地址內部進行換行*/
保持不換行: white-space:nowrap; /*還可以移除連續空白*/

 

回上一頁

相關文章:

喜歡這篇文章嗎?立即分享

Posted : / Views: 2196
Last updated :2017-11-23