В этой статье перечислены рекомендуемые стили CSS для разрывов строк, совместимые с IE и FF, а также подробно описаны различия между переносом слов и разрывом слов.
Рекомендуемый CSS стиль разрыва строки, совместимый с IE и FF.
Лучший способ это
перенос слов: разрыв слова; переполнение: скрыто;
вместо
перенос слов:разрыв-слово; перенос слов:разрыв-все;
Ни один
перенос слов: разрыв слова; переполнение: авто;
В IE проблем нет, но в FF длинные английские строки будут блокироваться за пределами содержимого.
Разница между переносом слов и переносом слов
Ниже приводится цитируемое содержание:
перенос слов:
обычное содержимое по умолчанию выходит за пределы своего контейнера.
разрыв-слово Содержимое переносится на следующую строку, и при необходимости происходит разрыв слова. разрыв слова:
обычный По умолчанию. Разрешает перенос строк внутри слов. Кажется, это работает только для азиатского текста.
Break-all Действует так же, как обычно, для азиатского текста, но позволяет произвольно разрывать строку для неазиатского текста. Это значение подходит для азиатского текста, содержащего некоторые отрывки неазиатского текста.
Keep-all Не позволяет разбивать слова на китайском, японском и корейском языках. Работает так же, как и обычно, для всех неазиатских языков. Это значение оптимизировано для текста, содержащего небольшое количество китайского, японского или корейского языков. |
Краткое изложение следующее:
перенос по словам управляет переносом строк.
При использовании слова разрыва строки будут форсированы. Нет проблем с китайским языком, нет проблем и с английскими предложениями. Но для длинных строк английского языка это не работает.
Break-word контролирует, следует ли разбивать слова.
Нормальная ситуация — это ситуация по умолчанию, и английские слова не разделяются.
Break-all — это слово-брейк. Когда слово достигает границы, следующая буква автоматически переходит на следующую строку. В основном решает проблему длинных английских строк.
Keep-all относится к китайским, японским и корейским слитным словам. То есть, если вы используете это время только без переноса слов, китайский язык не будет переноситься. (Английские предложения нормальные.)
то есть под:
Использование переноса слов:break-word; все работает нормально.
фф дальше:
Если не использовать эти два, то с китайским проблем не будет. С английскими предложениями тоже проблем не будет. Однако длинные строки на английском языке могут вызвать проблемы.
Для решения длинных строк английского языка обычно используется word-wrap:break-word;word-break:break-all; Однако этот метод приведет к разъединению слов в обычных английских предложениях (то же самое относится и к ie).
Основная проблема в настоящее время заключается в отсоединении длинных цепочек английских слов и английских слов. На самом деле длинная строка в английском языке — это всего лишь относительно длинное слово.
То есть стоит ли отключать английские слова? Проблема очевидна и ее явно не следует отключать.
Для длинных строк на английском языке это вредоносно, поэтому беспокоиться об этом, конечно, не стоит. Однако мы также должны подумать о некоторых способах предотвращения расширения контейнера.
Используйте: overflow:auto; т.е. длинные строки будут автоматически переноситься. ff, длинные строки будут покрыты.
Итак, подведем итог: лучший способ — это перенос слов:разрыв-слово;переполнение:скрытый, а не перенос слов:разрыв-слово;разрыв слова:разрыв-все;.
word-wrap:break-word;overflow:auto; в IE проблем нет. Под ff длинные строки будут частично скрыты.
Кроме того, тестовый код выглядит следующим образом:
Ниже приводится цитируемое содержание:
1.htm============================================= = ==================== <стиль>
.c1{ ширина: 300 пикселей; граница: 1 пиксель, сплошной красный}
.c2{ ширина: 300 пикселей; перенос слов: разрыв-слово; граница: 1 пиксель, сплошной желтый}
.c3{ ширина: 300 пикселей; перенос слов: разрыв-слово; разрыв слова: разрыв-все; граница: 1 пиксель, сплошной зеленый}
.c4{ ширина: 300 пикселей; перенос слов: разрыв слова; разрыв слова: сохранить все; граница: 1 пиксель, сплошной синий}
.c5{ ширина: 300 пикселей; word-break: Break-all; граница: 1 пиксель, сплошной черный}
.c6{ ширина: 300 пикселей; разрыв слов: сохранить все; граница: 1 пиксель, сплошной красный}
.c7{ ширина: 300 пикселей; перенос слов: разрыв слова; переполнение: граница: 1 пиксель; сплошной желтый}
</стиль> .c1{ ширина: 300 пикселей; граница: 1 пиксель, сплошной красный}
<div класс="c1">
safjaskflasjfklsaifklasjflksajflksjflkasjfksafj
</div>
<класс div=c1>
Это все на английском. Это все на английском.
</div>
<класс div=c1>
Все на китайском. Все на китайском. Все на китайском.
</div>
<класс div=c1>
Смешанная аранжировка китайского и английского языков. Китайский и английский, смешанная версия китайского и английского языков. Китайский и английский.
</div> <br>
.c2{ ширина: 300 пикселей; перенос слов: разрыв-слово; граница: 1 пиксель, сплошной желтый}
<div класс="c2">
safjaskflasjfklsaifklasjflksajflksjflkasjfksafj
</div>
<класс div=c2>
Это все на английском. Это все на английском.
</div>
<класс div=c2>
Все на китайском. Все на китайском. Все на китайском.
</div>
<класс div=c2>
Смешанная аранжировка китайского и английского языков. Китайский и английский, смешанная версия китайского и английского языков. Китайский и английский.
</div> <br>
.c3{ ширина: 300 пикселей; перенос слов: разрыв-слово; разрыв слова: разрыв-все; граница: 1 пиксель, сплошной зеленый}
<div класс="c3">
safjaskflasjfklsaifklasjflksajflksjflkasjfksafj
</div>
<класс div=c3>
Это все на английском. Это все на английском.
</div>
<класс div=c3>
Все на китайском. Все на китайском. Все на китайском.
</div>
<класс div=c3>
Смешанная аранжировка китайского и английского языков. Китайский и английский, смешанная версия китайского и английского языков. Китайский и английский.
</div> <br>
.c4{ ширина: 300 пикселей; перенос слов: разрыв слова; разрыв слова: сохранить все; граница: 1 пиксель, сплошной синий}
<div класс="c4">
safjaskflasjfklsaifklasjflksajflksjflkasjfksafj
</div>
<класс div=c4>
Это все на английском. Это все на английском.
</div>
<класс div=c4>
Все на китайском. Все на китайском. Все на китайском.
</div>
<класс div=c4>
Смешанная аранжировка китайского и английского языков. Китайский и английский, смешанная версия китайского и английского языков. Китайский и английский.
</div> <br>
.c5{ ширина: 300 пикселей; word-break: Break-all; граница: 1 пиксель, сплошной черный}
<div класс="c5">
safjaskflasjfklsaifklasjflksajflksjflkasjfksafj
</div>
<класс div=c5>
Это все на английском. Это все на английском.
</div>
<класс div=c5>
Все на китайском. Все на китайском. Все на китайском.
</div>
<класс div=c5>
Смешанная аранжировка китайского и английского языков. Китайский и английский, смешанная версия китайского и английского языков. Китайский и английский.
</div> <br>
.c6{ ширина: 300 пикселей; разрыв слов: сохранить все; граница: 1 пиксель, сплошной красный}
<div класс="c6">
safjaskflasjfklsaifklasjflksajflksjflkasjfksafj
</div>
<класс div=c6>
Это все на английском. Это все на английском.
</div>
<класс div=c6>
Все на китайском. Все на китайском. Все на китайском.
</div>
<класс div=c6>
Смешанная аранжировка китайского и английского языков. Китайский и английский, смешанная версия китайского и английского языков. Китайский и английский.
</div> <br>
.c7{ ширина: 300 пикселей; перенос слов: разрыв слова; переполнение: авто; граница: 1 пиксель, сплошной желтый}
<div класс="c7">
safjaskflasjfklsaifklasjflksajflksjflkasjfksafj
</div>
<класс div=c7>
Это все на английском. Это все на английском.
</div>
<класс div=c7>
Все на китайском. Все на китайском. Все на китайском.
</div>
<класс div=c7>
Смешанная аранжировка китайского и английского языков. Китайский и английский, смешанная версия китайского и английского языков. Китайский и английский.
</div> |
