嵌套表中的长文字换行 [英] Long word wrap in nested tables
本文介绍了嵌套表中的长文字换行的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想说一个很长的词.我看过这篇文章:如何防止长词破坏我的div?
I'm trying to wrap a long word. I have seen this post : How to prevent long words from breaking my div?
在像这样的简单情况下效果很好:
It works great in a simple case like this :
.wrapWords
{
white-space: pre; /* CSS 2.0 */
white-space: pre-wrap; /* CSS 2.1 */
white-space: pre-line; /* CSS 3.0 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
white-space: -moz-pre-wrap; /* Mozilla */
white-space: -hp-pre-wrap; /* HP Printers */
word-wrap: break-word; /* IE 5+ */
}
<!-- This wraps correctly -->
<div style="width:145px;">
<div class="wrapWords" style="width:100%;">
<a href="#">AAAAAAAAAAAAAAAAAA</a>
</div>
<div>
但是我的案子有两个这样的嵌套表:
But my case has two nested tables like this :
<!-- This doesn't work -->
<table style="width:100%;">
<tr>
<td style="width:145px;">
<table style="width:100%;">
<tr>
<td style="width:100%;">
<div class="wrapWords" style="width:100%;">
<a href="#">BBBBBBBBBBBBBBBBBB</a>
</div>
</td>
<td>
</td>
</tr>
</table>
</td>
<td>
</td>
</tr>
</table>
您可以在此处测试此代码 http://jsfiddle.net/ZmnQ6/4/
You can test this code here http://jsfiddle.net/ZmnQ6/4/
推荐答案
表默认采用 table-layout:auto;
,因此随着内容的增加,宽度也增加,因此需要设置固定表格布局.
table is taking the table-layout: auto;
by default so as per contents increase the width also increases so you need to set table-layout to fixed.
table{
table-layout: fixed;
}
这篇关于嵌套表中的长文字换行的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文