Использование "word-wrap: break-word" в таблице

Возможный дубликат:
Word-wrap в таблице 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, а a 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, но оно также работало в других браузерах, что было бы еще лучше.

P.S. "Не использовать таблицы" не помогает.

Ответ 1

table-layout: fixed заставит ячейки соответствовать таблице (а не наоборот), например:

<table style="border: 1px solid black; width: 100%; word-wrap:break-word;
              table-layout: fixed;">
  <tr>
    <td>
        aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
        bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
    </td>
  </tr>
</table>

Ответ 2

Вы можете попробовать следующее:

td p {word-break:break-all;}

Это, однако, заставляет его выглядеть так, когда есть достаточно места, если вы не добавите тег <br>:

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb

Итак, я бы предложил добавить теги <br>, где есть новые строки, если это возможно.

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb

http://jsfiddle.net/LLyH3/3/

Кроме того, если это не решит вашу проблему, там есть аналогичный поток здесь.