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