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