HTML表格中的自动换行

longtextwithoutspace

要么

longtextwithoutspace

一个很长的镜头,但用Firebug(或类似的)仔细检查,你不会意外地继承以下规则:

white-space:nowrap;

这可能会覆盖您指定的换行符行为.

事实证明,没有好办法做到这一点.我最接近的是添加"溢出:隐藏;" 到桌子周围的div并丢失文本.真正的解决方案似乎是放弃了表.使用div和相对定位我能够达到相同的效果,减去遗留物

2015更新:这适合像我这样想要这个答案的人.经过6年的努力,这要归功于所有的贡献者.

* { // this works for all but td
  word-wrap:break-word;
}

table { // this somehow makes it work for td
  table-layout:fixed;
  width:100%;
}

如上所述,将文本放在div几乎可以正常工作中.你只需要指定width的div,这是幸运,布局这是静态的.

这适用于FF 3.6,IE 8,Chrome.

使用溢出包装的解决方法,正常表格布局+表格宽度100%正常工作

https://jsfiddle.net/krf0v6pw/

HTML

CSS

.content{
  word-wrap:break-word; /*old browsers*/
  overflow-wrap:break-word;
}

table{
  width:100%; /*must be set (to any value)*/
}

.overflow-wrap-hack{
  max-width:1px;
}

优点:

使用overflow-wrap:break-word而不是word-break:break-all.哪个更好,因为它试图首先打破空格,并且只有当单词大于它的容器时才切断单词.

不需要table-layout:fixed.使用常规自动调整大小.

不需要定义固定width或固定max-width的像素.%如果需要,定义父级.

在FF57,Chrome62,IE11,Safari11中测试过

改变你的代码

word-wrap: break-word;

至

word-break:break-all;

例

  

    

      
longtextwithoutspacelongtextwithoutspace Long Content, Long Content, Long Content, Long Content, Long Content, Long Content, Long Content, Long Content, Long Content, Long Content
    
    
Short Content
    
  

longtextwithoutspace

long text with andthenlongerwithoutspaces

td {
  border: 1px solid;
}

  

    

      

        Looooooooooooooooooo­oooooooooooooooooooo­oooooooooooooooooooo­oooooooooooooooooooo­oooooooooooooooooooo­oooooooooooooooooooo­oooooooooooooooooooo­oooooooooooooooooooo­oooooooooooooooooooo­oooooooooooooong word
      
    
    
Short word
  

    

        

              

                 longtexthere
              
        
        
Foo
    

    

        

               

                 longtexthere
               
            
        
Foo
    

   

    

        
LongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWord
        
        

            Foo
        
    

looooooooooodasdsdaasdasdasddddddddddddddddddddddddddddddasdasdasdsadng word
Foo

 

    
looooooooooodasdsdaasdasdasddddddddddddddddddddddddddddddasdasdasdsadng word
    
Foo

longtexthere

    
loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong word
    
Foo

    
    


    
Merged cell


    
VeryLongWordInThisCell
    
Cell 2