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

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

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

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


[範例下載]





回應本篇 »

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

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

共 6 梅留言

  • 第6梅
    小莫 說道:

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

    回應:
    只能在過長的文字間加入­
  • 第5梅
    chyuanyiin 說道:

    請教前輩:那如果要把表格中插入圖片,可以把表格寬度定死然後圖片插入後自動符合表格[儲存格]寬度嗎?
    就是不用再做小圖或是可以自動建立小圖的語法

    以上謝謝您!!!

    回應:
    這部分若你要依照表格大小去改變圖片大小的話,
    需要透過javascript才作控制,
    但這會有一個問題,
    就是圖片會產生鋸齒化,
    http://www.minwt.com/index.php/myapp/637
    你可以參照上一篇,
    利用flash來作縮放會比較好一點,
    可以讓圖片有平滑處理的效果
  • 第4梅
    chyuanyiin 說道:

    前輩補充一下資料麻煩點連結解惑 謝謝!!!
    http://tw.myblog.yahoo.com/pctop-chyuanyiin/article?mid=609&prev=-1&next=607

    回應:
    關於這部分,要找一下DW中的設定,
    那是由於半型字把它撐開了~
    大部分都以IE看到的為主~~
    否則有另一種作法,
    就是在Div設定當溢位時就隱藏起來,
    將子可解決此問題