html - html表格自动换行

  显示原文与译文双语对照的内容

我一直在使用 word-wrap: break-word 来在 divspan 。 但是,它似乎在表格单元格中不起作用。 我有一个设置为 width:100%的表格,其中一行和两列。 列中的文字虽然使用上面的word-wrap 样式,但不换行。 它使文本越过单元格边界。 这发生在 Firefox,Google Chrome 和 IE 上。

下面是源的样子:


<table style="width: 100%;">
 <tr>
 <td align="left"><div style="word-wrap: break-word;">Long Content</div></td>
 <td align="right"><span style="display: inline;">Short Content</span></td>
 </tr>
</table>

"长内容"大于页面的界限,但它与上面的HTML不匹配。 我已经尝试了添加 text-wrap:suppresstext-wrap:normal的建议,但没有帮助。

时间:

IE 中的以下工作。 注意添加了 table-layout:fixed CSS属性


<table style="table-layout: fixed; width: 100%">
 <tr>
 <td style="word-wrap: break-word">
 LongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongWord
 </td>
 </tr>
</table>


<td style="word-break:break-all;">longtextwithoutspace</td>

或者


<span style="word-break:break-all;">longtextwithoutspace</span>

很长的镜头,但double-check带有 Firebug ( 或者类似或者相似),你没有意外继承以下规则:

 
white-space:nowrap;

 

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

如上所述,在 div 中放置文本几乎可以工作。 你只需要指定的widthdiv,它是幸运的静态布局。

这里操作适用于 FF 3.6,IE 8,Chrome 。


<td>
 <div style="width: 442px; word-wrap: break-word">
 <!-- Long Content Here-->
 </div>
</td>

问题有


<td style="word-break:break-all;">longtextwithoutspace</td>

是,它将不那么好当文本工作有一些空格,e.g.


<td style="word-break:break-all;">long text with andthenlongerwithoutspaces</td>

如果单词 andthenlongerwithoutspaces 在一行中适合表格单元格,则 long text with andthenlongerwithoutspaces 不,长单词将一分为二,而不是换行。

替代解决方案:在每一个长单词中插入 U+200B ( ZWSP ),U+00AD ( 软连字符 ) 或者 U+200C ( ZWNJ ),比如,20个字符。

原来没有好的方法来做这个。 我最接近的是将"溢出:隐藏;"添加到表格的div中并丢失文本。 真正的解决方案似乎是将表转储到。 使用div和相对定位,我可以达到同样的效果,减去 <table>的遗留

签出这里演示文稿


<table style="width: 100%;">
<tr>
 <td align="left"><div style="word-break:break-all;">LongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWord</div>
 </td>
 <td align="right">
 <span style="display: inline;">Foo</span>
 </td>
</tr>
</table>

下面是读取的链接

在 IE 8和 Chrome 13中测试。


<table style="table-layout: fixed; width: 100%">
 <tr>
 <td align="left">
 <div style="word-wrap: break-word;">
 longtexthere
 </div>
 </td>
 <td align="right"><span style="display: inline;">Foo</span></td>
 </tr>
</table>

这将使表格适合页面宽度,每列占 50%的宽度。

如果你喜欢第一列占据更多的页面,请将 width: 80% 添加到 td 中,如下面的示例所示,用你所选择的百分比替换 80% 。


<table style="table-layout: fixed; width: 100%">
 <tr>
 <td align="left" style="width:80%">
 <div style="word-wrap: break-word;">
 longtexthere
 </div>
 </td>
 <td align="right"><span style="display: inline;">Foo</span></td>
 </tr>
</table>

唯一需要做的事情是根据你想要实现的布局,向 <td> 或者 <div> 中添加宽度。

比如:


<table style="width: 100%;" border="1"><tr>
<td align="left"> <div style="word-wrap: break-word; width: 100px;">looooooooooodasdsdaasdasdasddddddddddddddddddddddddddddddasdasdasdsadng word</div></td>
<td align="right"><span style="display: inline;">Foo</span></td>
</tr></table>

或者


 <table style="width: 100%;" border="1"><tr>
 <td align="left" width="100"> <div style="word-wrap: break-word;">looooooooooodasdsdaasdasdasddddddddddddddddddddddddddddddasdasdasdsadng word</div></td>
 <td align="right"><span style="display: inline;">Foo</span></td>

</tr></table>

...