Советы по реализации автоматического переноса строк с помощью CSS

Все знают, что непрерывный английский или цифры могут привести к расширению контейнера и не могут автоматически переноситься в соответствии с размером контейнера. Вот как их можно обернуть с помощью CSS!

для div

1. (браузер IE) пробел:нормальный; word-break:break-all; первый здесь соответствует стандарту.

#wrap {пробел: нормальная ширина: 200 пикселей };
или
#wrap{word-break:break-all;width:200px;}
<div id="wrap">ddd111111111111111111111111111111</div>

Эффект: можно добиться разрывов строк.

2. (Браузер Firefox) white-space:normal; word-break:break-all;overflow:hidden; Нет хорошего метода реализации в том же FF. Вы можете только скрыть или добавить полосы прокрутки, но, конечно, без полос прокрутки. .Эффект лучше!

#wrap {пробел: нормальная; ширина: 200 пикселей; переполнение: авто;}
или
#wrap{word-break:break-all;width:200px; overflow:auto;
<div id="wrap">ddd1111111111111111111111111111111111111111</div>

Эффект: Контейнер нормальный, а содержимое скрыто.

для стола

1. (браузер IE) Используйте стиль table-layout:fixed;

<стиль>
.tb{макет таблицы: исправлено}
</стиль>
<table class="tbl" width="80">
<tr><td>
abcdefghigklmnopqrstuvwxyz 1234567890
</td></tr>
</таблица>

Эффект: можно переносить строки. 2. (браузер IE) использовать стиль.

<стиль>
.tb {макет таблицы: исправлено}
</стиль>
<table class="tb" width="80"><tr><td nowrap>
abcdefghigklmnopqrstuvwxyz 1234567890
</td></tr>
</таблица>

Эффект: можно делать разрывы строк.

3. (браузер IE) Используйте стиль table-layout: fixed и nowrap при использовании процентов для фиксации размера td.

<стиль>
.tb{макет таблицы: исправлено}
</стиль>
<table class="tb" ширина=80>
<тр>
<td width=25% nowrap>
abcdefghigklmnopqrstuvwxyz 1234567890
</td>
<td nowrap>abcdefghigklmnopqrstuvwxyz 1234567890</td>
</tr>
</таблица>

Эффект: оба TD переносятся нормально.

4. (Браузер Firefox) Используйте стиль table-layout: fix и nowrap при использовании процентов для фиксации размера td и используйте div

<стиль>
.tb {макет таблицы: исправлено}
.td {переполнение: скрыто;}
</стиль>
<класс таблицы=ширина ТБ=80>
<tr><td width=25% class=td nowrap>
<div>abcdefghigklmnopqrstuvwxyz 1234567890</div>
</td>
<td class=td nowrap><div>abcdefghigklmnopqrstuvwxyz 1234567890</div></td>
</tr>
</таблица>

Ширина ячейки здесь должна быть определена в процентах: она отображается нормально, но не может переноситься.

Примечание. Не существует хорошего способа обернуть содержимое контейнера под FF. Вы можете использовать переполнение только для того, чтобы скрыть дополнительный контент, чтобы не повлиять на общий эффект.