使用“自动换行:断字"在一张桌子内 [英] Using "word-wrap: break-word" within a table
问题描述
可能的重复:
html 表格中的自动换行
这段文字在 Google Chrome(和其他现代浏览器)上的表现完全符合我的要求:
<div style="border: 1px solid black; width:100%; word-wrap: break-word;"><p>啊啊啊啊啊啊啊啊bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</p>当浏览器足够宽时，a+和b+在同一行.
aaaaaaaaaaaaaaaa bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb当您缩小浏览器时，a+ 和 b+ 被放在不同的行上.
aaaaaaaaaaaaaaabbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb当b+装不下时，就断掉，放两行(一共三行).
aaaaaaaaaaaaaaabbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
这一切都很棒.
然而，在我的情况下，这不是 div 而是 table，如下所示:
在这种情况下，#1 和 #2 发生，但不发生 #3.也就是说，表格在第 2 步之后停止缩小，第 3 步永远不会发生.断词似乎没有被过滤掉.
有谁知道#3 是如何发生的?该解决方案只需要在 Chrome 中运行，但它也可以在其他更好的浏览器中运行.
附言不要使用表格"没有帮助.
解决方案 table-layout: fixed 将强制单元格适合表格(而不是相反)，例如:
Possible Duplicate:
Word-wrap in a html table
This text behaves exactly the way I want on Google Chrome (and other modern browsers):
<div style="border: 1px solid black; width:100%; word-wrap: break-word;">
<p>
aaaaaaaaaaaaaaaa
bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
</p>
</div>
When the browser is wide enough, a+ and b+ are on the same line.
aaaaaaaaaaaaaaaa bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
As you narrow the browser, a+ and b+ are put on separate lines.
aaaaaaaaaaaaaaaa
bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
When b+ can no longer fit, it is broken and put on two lines (for a total of three lines).
aaaaaaaaaaaaaaaa
bbbbbbbbbbbbbbbbbbbbbbbb
bbbbbbbb
That's all great.
In my situation, however, this is not a div but a table, like so:
<table style="border:1px solid black; width:100%; word-wrap:break-word;">
<tr>
<td>
<p>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
</p>
</td>
</tr>
</table>
In this case, #1 and #2 happen, but not #3. That is, the table stops narrowing after step 2 and step 3 doesn't ever happen. The break-word doesn't seem to be filtering down.
Does anyone know how make #3 happen? The solution only need work in Chrome, but it it also worked in other browsers that would be even better.
P.S. "Don't use tables" is not helpful.
解决方案 table-layout: fixed will get force the cells to fit the table (and not the other way around), e.g.:
<table style="border: 1px solid black; width: 100%; word-wrap:break-word;
table-layout: fixed;">
<tr>
<td>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
</td>
</tr>
</table>
这篇关于使用“自动换行:断字"在一张桌子内的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
登录
关闭
扫码关注1秒登录
发送“验证码”获取
|
15天全站免登陆