使用“word-wrap：break-word”在表内

问题描述

文字的行为方式与Google Chrome（以及其他现代浏览器）完全一样：

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>

1. 当浏览器足够宽时，a +和b +在同一行。

1. When the browser is wide enough, a+ and b+ are on the same line.

aaaaaaaaaaaaaaaa bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb

在缩小浏览器范围时，将a +和b +放在不同的行上。

As you narrow the browser, a+ and b+ are put on separate lines.

aaaaaaaaaaaaaaaa
bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb

当b +不能再适合时， （总共三行）。

When b+ can no longer fit, it is broken and put on two lines (for a total of three lines).

aaaaaaaaaaaaaaaa
bbbbbbbbbbbbbbbbbbbbbbbb
bbbbbbbb

这太棒了。

然而，在我的情况下，这不是 div ，而是表 p>

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>

在这种情况下，＃1和＃2发生，但不是＃3。也就是说，在步骤2之后表停止变窄，并且步骤3不发生。

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.

有没有人知道如何让＃3发生？该解决方案只需要在Chrome中工作，但它在其他浏览器中工作会更好。

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 将强制单元格适合表格（而不是相反），例如：

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>

这篇关于使用“word-wrap：break-word”在表内的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！