Вопрос по html, css – перенос слов в этом примере не работает

50

Я не могу получить перенос слов для работы с этим примером ...

<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. Благодарю.

РЕДАКТИРОВАТЬ: Сбой в Chrome 19 и Firefox 12, он работает в IE8. Я попробовал строгий и переходный тип документа, ни тот, ни другой.

Да, тип документа не работает. Я пробовал строгие и переходные. b10hazard
Одна вещь, которую другие, кажется, не упоминают, возможно, вам придется вернуть пустое пространство в нормальное состояние, если оно унаследовано. user420667
Вы пытались добавить DOCTYPE, чтобы браузер не работал в режиме IE5.5? Niet the Dark Absol

Ваш Ответ

6   ответов
1

чтобы умный перерыв (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 */
    }
}
0

This code is also working:

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

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

</body></html>

0

word-wrap работа с недвижимостьюdisplay:inline-block:

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

Mozilla Firefox solution

Добавлять:

display: inline-block;

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

Webkit based browsers (Google Chrome, Safari, ...) solution

Добавлять:

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

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

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

Opera solution

Добавлять:

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

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

Предыдущий абзац относится к Opera аналогичным образом.

Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded b10hazard
31

Используйте этот код (взяты из 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;
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
5

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

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;

Извините, но я работаю на машине Windows, где нет сафари ...
это работало для меня в мобильном, сафари. Спасибо за это.
Предоставленный фрагмент не работает для Safari 5.1.7. Как это исправить для Safari

Похожие вопросы