word-wrap 第一頁

word-wrap 1

指定是否可以將完整的長字分為二，以免長字超出邊界。適用於英文，通常英文用音節規則來斷字。可設為：

1. break-word：可以任意斷字，不依循音節規則。
2. normal：長字會維持原狀，超出邊界，此為預設值。
3. inherit：繼承父元素特徵。

使用此項，必須先將 text-wrap 特徵設為 normal 或 suppress。例外的是 IE 沒有 text-wrap，一律可以用此項。 <p style='width: 120px; background:#339'> John F. Kennedy said: [AskNotWhatYourCountry] can do for you - ask [WhatYouCanDoForYourCountry]. </p> <p style='text-wrap:normal; word-wrap:break-word; width: 120px; background:#339'> John F. Kennedy said: [AskNotWhatYourCountry] can do for you - ask [WhatYouCanDoForYourCountry]. </p>

• 風格用法：

  <p style='width: 120px; background:#339'>
  John F. Kennedy said: [AskNotWhatYourCountry] can do for you -
  ask [WhatYouCanDoForYourCountry].
  </p>
  
  <p style='text-wrap:normal;
     word-wrap:break-word;
     width: 120px; background:#339'>
  John F. Kennedy said: [AskNotWhatYourCountry] can do for you -
  ask [WhatYouCanDoForYourCountry].
  </p>
  

• 執行結果：

  John F. Kennedy said: [AskNotWhatYourCountry] can do for you - ask [WhatYouCanDoForYourCountry].

  John F. Kennedy said: [AskNotWhatYourCountry] can do for you - ask [WhatYouCanDoForYourCountry].

• 上例，IE6, Safari, Chrome 成功；Firefox3.1 才有此項。

使用 &#8203; 或 &shy; 斷字：&#8203; 與 &shy; 是不可見的字。例如這串數字 1​2​3​4​5 間加了 &#8203;；a­b­c­d­e 間加了 &shy;。在 Firefox, Safari, Chrome 這兩個字看不見也不佔空間，所以 12345, abcde 是連著的；但是在 IE6 會以空格展現 &#8203;。由於舊版的 Firefox 沒有 word-wrap，所以可以選其一加在長字中，引導斷字。下例中，第一例的長字間加了 &shy;；第二例的長字間加了 &#8203;。&shy; 會在斷字處加上 "-"；&#8203; 則不會。 <p style='width: 120px; background:#339'> John F. Kennedy said: [Ask­Not­What­Your­Country] can do for you － ask [What­You­Can­Do­For­Your­Country]. </p> <p style='width: 120px; background:#339'> John F. Kennedy said: [Ask​Not​What​Your​Country] can do for you － ask [What​You​Can​Do​For​Your​Country]. </p>

• 風格用法：

  <p style='width: 120px; background:#339'>
  John F. Kennedy said: [Ask­Not­What­Your­Country] can do for you －
  ask [What­You­Can­Do­For­Your­Country].
  </p>
  
  <p style='width: 120px; background:#339'>
  John F. Kennedy said: [Ask​Not​What​Your​Country] can do for you －
  ask [What​You​Can​Do​For​Your​Country].
  </p>
  

• 執行結果：

  John F. Kennedy said: [Ask­Not­What­Your­Country] can do for you － ask [What­You­Can­Do­For­Your­Country].

  John F. Kennedy said: [Ask​Not​What​Your​Country] can do for you － ask [What​You​Can​Do​For​Your​Country].

word-wrap（你正在看 第一頁）

:

第一頁

第二頁