отлично работает для меня

жный дубликат:
Завершение в таблицу HTML

Этот текст ведет себя так, как я хочу в Google Chrome (и других современных браузерах):

<div style="border: 1px solid black; width:100%; word-wrap: break-word;">
  <p>
    aaaaaaaaaaaaaaaa
    bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
  </p>
</div>

Когда браузер достаточно широк, a + и b + находятся на одной строке.

aaaaaaaaaaaaaaaa bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb

Когда вы сужаете браузер, a + и b + ставятся в разные строки.

aaaaaaaaaaaaaaaa
bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb

Когда b + больше не может поместиться, он разбивается и ставится на две строки (всего три строки).

aaaaaaaaaaaaaaaa
bbbbbbbbbbbbbbbbbbbbbbbb
bbbbbbbb

Это все здорово.

В моей ситуации, однако, это неdiv ноtable, вот так:

<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 никогда не происходит. Брейк-слово, кажется, не фильтруется.

Кто-нибудь знает, как сделать # 3? Решение нужно работать только в Chrome, но оно также работает в других браузерах, что было бы еще лучше.

Постскриптум «Не используйте таблицы» не полезно.