[CSS]word-wrap: 讓英文字元自動斷行

  是否有遇到英文不齊行的問題,由於英文字為半行字元,因此常會出現二種情形,一種則是畫面被撐開,另一種情形則是英文無法左右齊行,雖然html裡面有左右齊行的語法,但是一旦使用了左右齊行,則會發現英文字的間距被強制拉開的現象,但解決方法卻是如此的簡單,只要入將下列的語法加入,就可完成英文左右齊行的夢想。

解決方法:
word-wrap: break-word;
word-break: break-all;

※將上列語法加入容器中,如divtdbody…等。


[範例下載]


相關文章

「Lazy Load CSS」非同步載入CSS,當網頁使用雲端字型更順暢

「Lazy Load CSS」非同步載入CSS,當網頁使用雲端字型更順暢

CSS3-clip-path繪製不規則形遮色片線上產生器

CSS3-clip-path繪製不規則形遮色片線上產生器

CSS教學-hover滑入圖片時,加入CSS3動畫特效「淡入淡出」變換圖片

CSS教學-hover滑入圖片時,加入CSS3動畫特效「淡入淡出」變換圖片

將ICON Fonts向量圖示字型引用到CSS中(Font Awesome為例)

將ICON Fonts向量圖示字型引用到CSS中(Font Awesome為例)

CSS3動畫hover套件,各種常用的互動特效直接套用

CSS3動畫hover套件,各種常用的互動特效直接套用





回應本篇 »

(姓名)*必填
(信箱)*必填
(網站)

※PS: 因梅干時間有限,教學網中所分享的主題繁多(所遇狀況也很多),可能無法一一回答各位,不便之處還請見諒。
※PS: 本教學網不提供「破解檔」、「註冊機」或「註冊碼」等資訊,請勿利用留言索取檔案。

共 6 梅留言

  • 第1梅
    小莫 說道:

    梅老師您好,
    請問有沒有方法能讓英單被斷行時, 中間出現連字號"-“呢?
    我在寬100px的div裡放一段英文文章, 結果部分單字太長自動換行,
    那一行變成只有三個詞後面一大塊空白的現象,
    我使用 word-break: break-all; 後變得比較整齊,
    但……英文單字被斷開後, 變的不知道這文章在寫甚麼…… ORZ
    想請問有辦法在被斷行的單字後加個連字號嗎? Q__Q

    回應:
    只能在過長的文字間加入­