CSS реализует автоматический перенос строк

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

для div

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

#wrap {пробел: нормальная ширина: 200 пикселей };

или

#wrap{word-break:break-all;width:200px;}

<div >ddd11111111111111111111111111111111111</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 >ddd11111111111111111111111111111111111111111</div>

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

для стола

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

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

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

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

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

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

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

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

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