Проблема автоматического переноса строк, перенос строк обычных символов более разумен, но непрерывные числа и английские символы часто расширяют контейнер, что довольно проблематично. Ниже показано, как CSS реализует перенос строк.
Лучшее определение переноса строк в CSS.
code.wrap {. макет таблицы: исправлено; разрыв слов: переполнение: скрыто };
Здесь переполнение: скрытое или автоматическое;
=============================================== ===============
Для элементов уровня блока, таких как div и p, перенос строки элементов обычного текста (азиатского текста и неазиатского текста) имеет пробел по умолчанию: нормальный, и он автоматически переносится после определенной ширины.
HTML
<div id="wrap">Обычные элементы переноса текста (азиатский и неазиатский текст) имеют пробел по умолчанию: нормальный, если он определен</div>
CSS
#wrap{white-space:normal; width:200px; }
1. (браузер IE) Для непрерывных английских символов и арабских цифр используйте перенос по словам: Break-word; или word-break:break-all для достижения принудительной строки; разрыв
#wrap{word-break:break-all; ширина:200 пикселей;}
или
#wrap{word-wrap:break-word; width:200px;}
<div id="wrap">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>
Эффект: можно добиться разрыва строки.
2. (Браузер Firefox) Разрыв непрерывных английских символов и арабских цифр. , все версии Firefox не решают эту проблему. Мы можем только скрыть символы за границей или добавить в контейнер полосы прокрутки.
#wrap{word-break:break-all; width:200px; overflow:auto;}
<div id="wrap">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>
Эффект: контейнер нормальный, а содержимое
таблицы
скрыто.
http://www.knowsky.com/
1. (браузер IE) Используйте table-layout:fixed; чтобы принудительно увеличить ширину таблицы и скрыть лишнее содержимое
<table style="table-layout:fixed" width="200">
<тр>
<td>abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss
</td>
</tr>
</table>
Эффект: скрыть избыточное содержимое.
2. (браузер IE) используйте table-layout: fix; внутренний td, th использует word-break:break-all или word-wrap:break; -word ;Разрыв строки
<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>
</table>
Эффект: возможен перенос строк
3. (браузер IE) Вложение div, p и т. д. в td, th использует метод переноса строк div и p, упомянутый выше
4. (браузер Firefox) Использование table-layout: исправлено ;Принудительно увеличивая ширину таблицы, внутренний td,th использует word-break:break-all; или word-wrap:break-word; для переноса строки используйте overflow:hidden, чтобы скрыть лишнее содержимое, 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>
</table>
Эффект: скрыть больше, чем контент.
5. (Браузер Firefox) Вложите элементы div, p и т. д. в td, th. Используйте метод, упомянутый выше, для работы с Firefox, чтобы запустить окно кода. Наконец, вероятность этого явления. происходит очень мало, но нельзя исключать шалости пользователей сети.
Ниже приводится эффект упомянутого примера
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional. дтд ">
<html xmlns=" http://www.w3.org/1999/xhtml ">
<голова>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Перенос строк</title>
<style type="text/css">
table,td,th,div { border:1px green Solid;}
code {font-family:"Courier New", Courier, monospace;}
</стиль>
</голова>
<тело>
<h1><code>div</code></h1>
<h1><code>Все пробелы: нормально;</code></h1>
<div style="white-space:normal; width:200px;">Перенос по словам по-прежнему происходит в элементе td, для атрибута WIDTH которого установлено значение меньше, чем развернутое содержимое ячейки, даже если для свойства noWrap установлено значение true, поэтому атрибут WIDTH имеет приоритет над свойством noWrap в этом сценарии</div>
<h1><code>IE word-wrap : Break-word ;</code></h1>
<div style="word-wrap:break-word; width:200px;">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>
<h1><code>IE word-break:break-all;</code></h1>
<div style="word-break:break-all;width:200px;">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>
<h1><code>Firefox/ word-break:break-all:auto;</code></ h1>
<div style="word-break:break-all; width:200px; overflow:auto;">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>
<h1><code>таблица</code></h1>
<h1><code>Макет таблицы: исправлено;</code></h1>
<table style="table-layout:fixed" width="200">
<тр>
<td>abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss</td>
</tr>
</таблица>
<h1><code>таблица-макет: исправлено; разрыв слова: разрыв всех; перенос слов: разрыв слова;</code></h1>
<table width="200" style="table-layout:fixed;">
<тр>
<td width="25%" style="word-break : Break-all; ">abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss</td>
<td style="word-wrap : Break-word ;">abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss</td>
</tr>
</таблица>
<h1><code>FF table-layout: исправлено; переполнение: скрыто;</code></h1>
<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>
</таблица>
</тело>
</html>