В этом примере слово break-word не работает

Я не могу заставить word-wrap работать с этим примером...

<html>
<head></head>
<body>

<table style="table-layout:fixed;">
<tr>
<td style="word-wrap: break-word; width:100px;">ThisStringWillNotWrapThisStringWillNotWrapThisStringWillNotWrapThisStringWillNotWrapThisStringWillNotWrapThisStringWillNotWrapThisStringWillNotWrapThisStringWillNotWrapThisStringWillNotWrap</td>
</tr>
</table>

</body></html>

Я помнил, что читал, что макет должен быть указан (что я и сделал), но помимо этого я не уверен, что мне нужно сделать, чтобы заставить это работать. Мне действительно хотелось бы, чтобы это работало в Firefox. Спасибо.

EDIT: В Chrome 19 и Firefox 12 он работает в IE8. Я пробовал doctype строгий и переходный, не работал.

Ответ 1

Решение Mozilla Firefox

Добавить

display: inline-block;

в стиле вашего td.

Браузеры на основе Webkit (Google Chrome, Safari,...)

Добавить

display: inline-block;
word-break: break-word;

в стиле вашего td.

Примечание: Имейте в виду, что на данный момент break-word не входит в стандартную спецификацию для webkit; поэтому вам может быть интересно использовать break-all. Это альтернативное значение обеспечивает, несомненно, радикальное решение; однако он соответствует стандарту.

Решение Opera

Добавить

display: inline-block;
word-break: break-word;

в стиле вашего td.

Предыдущий параграф применим к Opera аналогичным образом.

Ответ 2

Используйте этот код (взят из css-трюков), который будет работать во всех браузерах

overflow-wrap: break-word;
word-wrap: break-word;

-ms-word-break: break-all;
/* This is the dangerous one in WebKit, as it breaks things wherever */
word-break: break-all;
/* Instead use this non-standard one: */
word-break: break-word;

/* Adds a hyphen where the word breaks, if supported (No Blink) */
-ms-hyphens: auto;
-moz-hyphens: auto;
-webkit-hyphens: auto;
hyphens: auto;

Ответ 3

Эта комбинация свойств помогла мне:

display: inline-block;
overflow-wrap: break-word;
word-wrap: break-word;
word-break: normal;
line-break: strict;
hyphens: none;
-webkit-hyphens: none;
-moz-hyphens: none;

Ответ 4

чтобы умный перерыв (break-word) работал хорошо в разных браузерах, для меня работал следующий набор правил:

#elm {
    word-break:break-word; /* webkit/blink browsers */
    word-wrap:break-word; /* ie */
}
-moz-document url-prefix() {/* catch ff */
    #elm {
        word-break: break-all; /* in ff-  with no break-word we'll settle for break-all */
    }
}

Ответ 5

Этот код также работает:

<html>
<head></head>
<body>

<table style="table-layout:fixed;">
<tr>
<td style="word-break: break-all; width:100px;">ThisStringWillNotWrapThisStringWillNotWrapThisStringWillNotWrapThisStringWillNotWrapThisStringWillNotWrapThisStringWillNotWrapThisStringWillNotWrapThisStringWillNotWrapThisStringWillNotWrap</td>
</tr>
</table>

</body></html>

Ответ 6

свойство word-wrap работает с display:inline-block:

display: inline-block;
word-wrap: break-word;
width: 100px;