強制HTML表格內文不超出設定寬度 (強制斷行)

10 comments On 強制HTML表格內文不超出設定寬度 (強制斷行)

• 
  xvx

  2 3 月, 2004 at 7:02 下午

  look look

• 
  陳嘉權

  14 11 月, 2004 at 8:30 上午

  謝謝你，一直找這個問題的答案，終於讓我找到了。

• 
  Cossak

  19 3 月, 2005 at 11:17 下午

  哇哈哈哈，太謝謝瞭！

• 
  yanle

  31 5 月, 2005 at 11:17 下午

  郁闷，我用OPERA观看的时候，没有break-all的效果！

• 
  Jona

  10 6 月, 2005 at 6:26 下午

  我用Firefox也不行~~

• 
  Neo

  5 5 月, 2006 at 3:48 下午

  其它瀏覽器可以參考這一篇:
  http://www.dw8.cn/dw8_2/151.asp
  ddd1111111111111111111111111111111111

  效果：可以实现换行
  2.（Firefox浏览器）white-space:normal; word-break:break-all;overflow:hidden;同样的FF下也没有很好的实现方法，只能隐藏或者加滚动条，当然不加滚动条效果更好！

  #wrap{white-space:normal; width:200px; overflow:auto;}
  或者
  #wrap{word-break:break-all;width:200px; overflow:auto; }

  eg.

  ddd1111111111111111111111111111111111111111

  效果：容器正常，内容隐藏
  对于table

  1. (IE浏览器)使用样式table-layout:fixed；
  eg.

  .tb{table-layout:fixed}

  abcdefghigklmnopqrstuvwxyz 1234567890

  效果：可以换行
  2.(IE浏览器)使用样式table-layout:fixed与nowrap
  eg.

  .tb {table-layout:fixed}

  abcdefghigklmnopqrstuvwxyz 1234567890

  效果：可以换行
  3. (IE浏览器)在使用百分比固定td大小情况下使用样式table-layout:fixed与nowrap

  .tb{table-layout:fixed}

  abcdefghigklmnopqrstuvwxyz 1234567890

  abcdefghigklmnopqrstuvwxyz 1234567890

  效果：两个td均正常换行
  3.(Firefox浏览器)在使用百分比固定td大小情况下使用样式table-layout:fixed与nowrap,并且使用div
  eg.

  .tb {table-layout:fixed}
  .td {overflow:hidden;}

  abcdefghigklmnopqrstuvwxyz 1234567890

  abcdefghigklmnopqrstuvwxyz 1234567890

  这里单元格宽度一定要用百分比定义
  效果：正常显示，但不能换行（注：在FF下还没有能使容器内容换行的好方法，只能用overflow将多出的内容隐藏，以免影响整体效果）
  –>

• 
  asd

  19 7 月, 2007 at 2:51 上午

  感謝~這問題困擾我好久

• 
  Kim

  18 12 月, 2007 at 5:29 下午

  好文啊!第一篇就找到你,真是幸運,感謝分享^^

• 
  Jason

  19 11 月, 2009 at 12:32 下午

  感謝分享, 我剛巧遇上這個問題呢 ^_^ 現在解決到了, 謝謝!

• 
  yuhleh

  15 1 月, 2010 at 1:31 下午

  這個方式，firefox不適用，一直以來都找不到全部瀏覽器都可以用的，又失望了一次………….