Проблема автоматического переноса строк, перенос строк обычных символов более разумен, но непрерывные числа и английские символы часто расширяют контейнер, что является настоящей головной болью. Ниже описано, как реализовать перенос строк в CSS.
Для элементов уровня блока, таких как div и p, перенос строки элементов обычного текста (азиатского текста и неазиатского текста) имеет пробел по умолчанию: нормальный, и он автоматически переносится после определенной ширины.
HTML
Обычные элементы переноса текста (азиатский и неазиатский текст) имеют пробел по умолчанию: нормальный, если он определен
CSS
#wrap {пробел: нормальная ширина: 200 пикселей };
1. (браузер IE) Для непрерывных английских символов и арабских цифр используйте перенос слов: разрыв-слово или разрыв слова:перерыв-все, чтобы добиться принудительного разрыва строки;
#wrap{word-break:break-all; ширина:200 пикселей;}
или
#wrap{word-wrap:break-word width:200px;}
abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111
Эффект: можно добиться разрывов строк.
2. (Браузер Firefox) Разрывы строк из непрерывных английских символов и арабских цифр не решают эту проблему. Мы можем только скрыть символы, выходящие за границу, или добавить в контейнер полосы прокрутки.
#wrap {word-break: Break-all; ширина: 200 пикселей; переполнение: авто;}
abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111
Эффект: контейнер нормальный, а содержимое таблицы скрыто.
(1) (браузер IE) использовать table-layout: исправлено принудительно увеличить ширину таблицы и скрыть лишнее содержимое;
<тр>
abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss
|
Эффект: скрыть избыточный контент.
(2) (браузер IE) используйте table-layout: fix; для принудительной установки ширины таблицы используйте разрыв строки: разрыв-все; перенос слова: разрыв строки;
<тр>
abcdefghigklmnopqrstuvwxyz 1234567890
|
abcdefghigklmnopqrstuvwxyz 1234567890
|
Эффект: можно делать разрывы строк. 3. (браузер IE) При вложении div, p и т. д. в td, th используйте метод переноса строк div и p, упомянутый выше.
4. (Браузер Firefox) используйте table-layout: fix; для принудительной установки ширины таблицы используйте разрыв слов: разрыв всех; или перенос слов: перенос строк; используйте переполнение: скрытый; чтобы скрыть содержимое, overflow:auto здесь не работает;
<тр>
abcdefghigklmnopqrstuvwxyz1234567890 |
abcdefghigklmnopqrstuvwxyz1234567890 |
Эффект: скрыть не только контент. 5. (Браузер Firefox) Вложите div, p и т. д. в td, th и т. д. Используйте метод, упомянутый выше, для работы с Firefox.
