Как обернуть текст с помощью CSS?

<td>gdfggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg</td>

Как мне получить текст, подобный этому, в CSS?

Ответ 1

Попробуйте сделать это. Работает для IE8, FF3.6, Chrome

<body>
  <table>
    <tr>
      <td>
        <div style="word-wrap: break-word; width: 100px">gdfggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg</div>
      </td>
    </tr>
  </table>
</body>

Ответ 2

Если вы наберете "AAAAAAAAAAAAAAAAAAAAAARRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRGGGGGGGGGGGGGGGGGGGGGG" это произведет:

AARRRRRRRRRRRRRRRRRRRR
RRGGGGGGGGGGGGGGGGGGGG
G

Я привел мой пример из нескольких разных сайтов в Google. Я тестировал это на ff 5.0, IE 8.0 и Chrome 10. Он работает на всех них.

.wrapword {
    white-space: -moz-pre-wrap !important;  /* Mozilla, since 1999 */
    white-space: -pre-wrap;      /* Opera 4-6 */
    white-space: -o-pre-wrap;    /* Opera 7 */
    white-space: pre-wrap;       /* css-3 */
    word-wrap: break-word;       /* Internet Explorer 5.5+ */
    white-space: -webkit-pre-wrap; /* Newer versions of Chrome/Safari*/
    word-break: break-all;
    white-space: normal;
}

<table style="table-layout:fixed; width:400px">
    <tr>
        <td class="wrapword"></td>
    </tr>
</table>

Ответ 3

С text-wrap поддержка браузера относительно слаба (как и следовало ожидать из спецификации черновика).

Вам лучше предпринять шаги, чтобы гарантировать, что данные не имеют длинных строк небелого пространства.

Ответ 4

Это будет работать везде.

<BODY>
  <TABLE style="table-layout:fixed;">
  <TR>
    <TD><div style="word-wrap: break-word; width: 100px" > gdfggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg</div></TD>
  </TR>
  </TABLE>
 </BODY>

Ответ 5

Лучший вариант, если вы не можете управлять вводом пользователя, заключается в том, чтобы установить свойство css, переполнение: скрытое, поэтому, если строка превосходит ширину, она не будет деформировать дизайн.

Отредактировано:

Мне нравится ответ: "word-wrap: break-word", а для тех браузеров, которые его не поддерживают, например IE6 или IE7, я бы использовал свое решение.