Как сделать CSS перенос слова на следующую строку?
Осуществить перенос слова можно при помощи CSS свойства word-break. У данного CSS свойства может быть несколько значений:
- Normal – значение по умолчанию, то есть перенос слова не осуществляется и если оно не помещается в блок с текстом, то просто вылезет за его пределы. Например:
Выглядит не очень! Не правда ли ?!
break-all – переносит часть слова на следующую строку если оно не помещается в блоке с текстом.
Вот что получится:
Сам HTML кода блока с текстом для переноса в моём случае выглядит вот так:
Сегодня мы с вами немного коснемся темы оформления текстов на вашем сайте. Создавая сайт и ведя уже существующий, нужно грамотно подходить к каждой его мелочи. Я – активный пользователь Интернета, очень часто ищу различную информацию абсолютно по разным темам. Зачастую встречаю сайты, на которых информация представлена примерно в таком виде:
Не говоря уже о том, что здесь нет никаких выделений (главного в тексте), так и отсутствуют какие-либо параграфы, или попросту – переносы строк. Текст может быть и корректным с точки зрения орфографии и его темы, но визуально – он некомфортен для восприятия. Согласитесь, такой вид куда более читабельный и не «отпугивает» наших пользователей:
Неважно, коммерческий ваш сайт или это обычный блог – всем этим нюансам должно быть уделено отдельное внимание. Именно поэтому сегодня я покажу вам целых три варианта переноса строк в вашем тексте
Для наглядности за основу мы возьмем популярный в кругах дизайнеров и верстальщиков текст «Lorem Ipsum», а если быть точнее – то несколько его параграфов:
и рассмотрим популярные способы переноса строк в HTML.
Зачем переносить «непереносимое»
В большинстве случаев при отображении текстового содержимого веб-страниц в браузере перенос слов не применяется. Если слово не вмещается целиком в область экрана, то по умолчанию оно полностью « переезжает » на следующую строчку.
Частичный перенос применяется лишь к длинным и сложным словам, состоящим из нескольких терминов и разделенных дефисом. Вот тут и возникают проблемы отображения этих слов на разных по диагонали экранах и в разных браузерах. При этом точно предугадать, как длинное слово будет « выглядеть » на клиентской стороне трудно, поэтому задавать переносы « вручную » бессмысленно:
Решаем проблему переноса слов с помощью HTML
Перед тем, как рассмотреть перенос длинных слов в CSS , изучим возможности решения этой проблемы с помощью языка гипертекста. Для этого в HTML имеется несколько вариантов:
Использование символа мягкого разрыва — позволяет задать место разрыва сложного слова. При изменении размеров окна браузера на следующую строку переносится только часть длинного слова, стоящая после ­ , а после первой половины выводится знак переноса, похожий на дефис:
Использование тега — элемент появился в HTML 5 . Он также служит для указания браузеру места для разрыва сложного или длинного слова. Но в отличие от предыдущего спецсимвола этот тег не выводит в месте « разлома » знак переноса, что может негативно сказаться на читаемости всего текста:
Перенос слов средствами CSS
Перед тем, как запретить перенос слов в CSS , давайте рассмотрим несколько свойств, способных разрешить основную проблему:
- word-wrap – описывает, как производить перенос слов, которые по длине не помещаются в установленные размеры контейнера. Сразу стоит предупредить, что с валидацией этого свойства возникают проблемы, и с реализацией его поддержки в CSS консорциум W3C еще не определился. Поэтому специализированные валидаторы при наличии word-wrap в коде будут выдавать ошибку:
Тем не менее, это свойство «воспринимается» всеми современными браузерами и является эффективным решением проблемы переноса длинных слов. word-wrap принимает следующие значения:
- normal – слова не переносятся;
- break-word – автоматический перенос слов;
- inherit – наследование значения родителя.
Пример, иллюстрирующий применение этого свойства:
В новой спецификации CSS свойство word-wrap было переименовано в overflow-wrap . Оба свойства принимают одинаковые значения. Но поддержка overflow-wrap пока реализована слабо, поэтому лучше использовать старую версию свойства:
Как видно на расположенном выше скриншоте, новое свойство поддерживается Google Chrome , но не поддерживается в IE . Поэтому overflow-wrap лучше не использовать для переноса слов в CSS .
- word-break – устанавливает правила переноса строк внутри контейнера, если они не помещаются в него по ширине. Это новое свойство, и его поддержка была реализована в CSS3 . Оно является валидным, но предназначено для работы со строками, поэтому перенос слов может производиться грамматически неправильно.
Свойство принимает три значения:
- normal – используются правила переноса, установленные по умолчанию;
- word-break – перенос строк осуществляется автоматически, чтобы слово поместилось в установленные по ширине размеры контейнера;
- keep-all – отключает автоматический перенос слов в китайском, японском и корейском. Для остальных языков действие значения аналогично normal.
- hyphens – новое свойство, которое появилось с выходом CSS3 . Оно устанавливает, как браузер будет осуществлять перенос слов в выводимом тексте. Свойство принимает несколько значений:
- none – отключает перенос слов в CSS ;
- manual ( значение по умолчанию ) – слова переносятся в тех участках текстового блока, где это задано с помощью тега или мягкого переноса () ;
- auto – браузер автоматически переносит слова на основе своих настроек.
должен присутствовать атрибут lang со значением «ru» (lang=»ru»).
Свойство поддерживается последними версиями IE , Opera и Firefox . Для каждого из них прописывается своя строчка CSS . Hyphens не поддерживается Google Chrome . Пример:
Запрет переноса слов
Иногда нужно сделать так, чтобы строка отображалась полностью без разрыва. Запрет переноса слов в css можно реализовать несколькими способами:
- С помощью неразрывного пробела   , который устанавливается в местах переноса строки или слов;
- Задав свойству white-space значение « nowrap » ( white-space: nowrap ).
Теперь вы сможете переносить с помощью CSS даже самые длинные слова. Но вот с проблемой труднопереносимых людей вам придется разбираться самостоятельно. Попробуйте воздействовать на них методами CSS – может и получиться, хотя мы сами не проверяли.
Таблицы для пользователей с ограниченными возможностями
Давайте кратко опишем как мы используем данные таблицы. Таблицы могут быть удобным инструментом, который даёт нам быстрый доступ к данным и позволяет искать разные значения. Например, быстрого взгляда на таблицу ниже достаточно, чтобы найти сколько колец было продано в Амстердаме в августе 2016. Чтобы понять эту информацию, мы проводим визуальные ассоциации между данными в этой таблице и её заголовками колонок и/или строк.
| Clothes | Accessories | |||||
|---|---|---|---|---|---|---|
| Trousers | Skirts | Dresses | Bracelets | Rings | ||
| Belgium | Antwerp | 56 | 22 | 43 | 72 | 23 |
| Gent | 46 | 18 | 50 | 61 | 15 | |
| Brussels | 51 | 27 | 38 | 69 | 28 | |
| The Netherlands | Amsterdam | 89 | 34 | 69 | 85 | 38 |
| Utrecht | 80 | 12 | 43 | 36 | 19 |
Но что если вы не можете провести эти визуальные ассоциации? Как тогда вы сможете прочитать таблицу выше? Люди с ослабленным зрением часто используют скринридер, который читает им информацию с веб-страницы. Это не проблема когда вы читаете простой текст, но интерпретация таблицы может быть сложной проблемой для слепых людей. Тем не менее, вместе с правильной разметкой мы можем заменить визуальные ассоциации программными.
В этой части статьи приводятся дополнительные способы которые делают таблицы более доступными.
Новая тема в этой статье это атрибут (en-US), который может быть добавлен к элементу он сообщает скринридеру какие ячейки точно являются заголовками — например, заголовок строки в которой он находится или столбца. Возвращаясь назад к нашему примеру с записями расходов, вы могли однозначно определить заголовки столбцов как здесь:
И у каждой строки может быть определён заголовок, как здесь (если мы добавили заголовки строк и заголовки столбцов):
Скринридер распознает разметку структурированную таким образом, что позволяют пользователям прочитать весь столбец или строку целиком.
Атрибут имеет ещё два возможных значения — и . Они используются для заголовков, которые располагаются вверху ваших столбцов или строк. Если вы посмотрите на таблицу «Items sold…» в начале этого раздела статьи, вы увидите что ячейка с «Clothes» находится над ячейками «Trousers», «Skirts» и «Dresses». Все эти ячейки должны быть помечены как заголовки (), но «Clothes» заголовок который находится сверху и определяет остальные три подзаголовка. Поэтому «Clothes» должна получить атрибут , тогда как другие получат атрибут .
Альтернатива атрибута это использование атрибутов и задавая ассоциации между заголовками и ячейками. Этот способ выглядит следующим образом:
- Вы устанавливаете уникальный для каждого элемента.
- Вы устанавливаете атрибут для каждого элемента. Каждый атрибут должен содержать список всех , разделённый пробелами, ко всем элементам которые действуют как заголовок для этой ячейки.
Это обеспечивает явное определение позиции для каждой ячейки вашей HTML таблицы, определяет заголовки столбцов и строк таблицы. Для того чтобы это работало реально хорошо таблице нужно определить и заголовки столбцов, и заголовки строк.
Вернёмся к нашему примеру с расчётом затрат, его можно переписать следующим образом:
Примечание: Этот метод создания очень точного определения ассоциаций между заголовками и данными в ячейках, но использует гораздо больше разметки и оставляет обширное пространство для ошибок. Атрибута обычно достаточно для большинства таблиц.
- Для заключительного упражнения мы, вначале создадим копию items-sold.html и minimal-table.css в новой папке.
- Теперь попробуем добавить соответствующий атрибут , который наиболее соответствует этой таблице.
- И наконец попробуем сделать другую копию изначальных файлов, на этот раз делая таблицу более доступной используя атрибуты и .
Примечание: вы можете проверить как работает последние примеры здесь items-sold-scope.html (also see this live) и items-sold-headers.html (see this live too).
Обходной путь, который использует переполнение-перенос и отлично работает с обычным макетом таблицы + ширина таблицы 100%
https://jsfiddle.net/krf0v6pw/
HTML
CSS
Льготы:
- Использует вместо . Что лучше, потому что он сначала пытается разбить пробелы и обрезает слово, только если слово больше, чем его контейнер.
- Нет необходимо. Используйте свой обычный автоматический размер.
- Не требуется определять фиксированный или фиксированный в пикселях. Определить родителя, если необходимо.
Протестировано в FF57, Chrome62, IE11, Safari11
Хотя этот прием действительно работает во всех браузерах, имейте в виду, что спецификация CSS не гарантирует этого. Согласно w3.org/TR/CSS21/visudet.html#propdef-max-width, «влияние ‘min-width’ и ‘max-width’ на таблицы, встроенные таблицы, ячейки таблицы, столбцы таблицы и группы столбцов не определено».
Проблема с
в том, что это будет не так хорошо, когда текст имеет некоторые пробелы, например
Если слово помещается в ячейку таблицы в одну строку, но нет, длинное слово будет разбито на две части, а не обернуто.
Альтернативное решение: вставьте U + 200B (ZWSP), U + 00AD (мягкий дефис) или U + 200C (ZWNJ) в каждое длинное слово после каждого, скажем, 20-го символа (однако см. Предупреждение ниже):
Предупреждение: добавление дополнительных символов нулевой длины не влияет на чтение. Однако это влияет на текст, копируемый в буфер обмена (эти символы, конечно, также копируются). Если текст буфера обмена позже будет использоваться в какой-либо функции поиска в веб-приложении … поиск будет прерван. Хотя это решение можно увидеть в некоторых хорошо известных веб-приложениях, по возможности избегайте.
Предупреждение: при вставке дополнительных символов не следует разделять несколько кодовых точек внутри графемы. См. Https://unicode.org/reports/tr29/#Grapheme_Cluster_Boundaries для получения дополнительной информации.
- Возможно, результат будет немного лучше, если в достаточно длинных словах вы вставите мягкий дефис после каждый символ, чтобы браузер мог надежно разбить слово на правом краю содержащего элемента.
- Хотя это жизнеспособное решение, казалось бы безобидное предложение добавить что-то «после каждого, скажем, 20-го символа» чревато ловушками, если вы хотите сделать это программно на своем сервере. Перебирая символы строки Unicode сложно в большинстве языков программирования. В Лучший, язык может облегчить итерацию по кодовым точкам Unicode, но это не обязательно то, что мы хотели бы называть «символами» (например, можно записать в виде двух кодовых точек).Вероятно, мы действительно имеем в виду графемы, но я не знаю Любые язык, который делает их тривиальным зацикливанием.
- 1 @MarkAmery, ты прав. Однако даже с простым ASCII это не очень хорошо. Я добавил «предупреждения».
Измените свой код
к
пример
-1; это заставляет браузер полностью игнорировать разрывы слов и разрыв между словами, даже если в этом нет необходимости. Это редко желаемое поведение и, по-видимому, не то поведение, которое хотел OP, иначе они бы не использовали break-word на первом месте.
Посмотрите эту демонстрацию
Вот ссылка для чтения
-1; с помощью break-all заставит браузер полностью игнорировать разрывы слов при выборе места для переноса строк, в результате чего даже если ваша ячейка содержит обычную прозу без очень длинных слов, вы получите разрывы строк в середине слов. Обычно это нежелательно.
Протестировано в IE 8 и Chrome 13.
Это приводит к тому, что таблица соответствует ширине страницы, а каждый столбец занимает 50% ширины.
Если вы предпочитаете, чтобы первый столбец занимал больше страницы, добавьте к как в следующем примере, заменив 80% выбранным вами процентом.
Бонус — br clear
А как сделать так чтобы текст, в котором вы поставили перенос строки, не обтекал плавающий элемент (это либо изображение с установленным align, либо элемент со свойством float), а начинался ниже элемента? Для этого можно использовать атрибут clear.
Допустим, у нас есть изображение выровненное по левому краю (align=»left»). Если мы установим <br clear=»all»> или <br clear=»left»>, то текст после тега <br> (следующая строка, которую мы и переносим) будет отображаться как надо, ниже рисунка. Другие значения атрибута clear тега <br> сделают так, чтобы текст обтекал рисунок, расположившись справа от него.
Использование этого специфичного атрибута не приветствуется спецификацией HTML — такой код будет невалидным.
Кстати, рекомендуем прочесть: Как вставить изображение в HTML.
Важно помнить!
Теги <thead> и <tfoot> нужны не всегда. Бывают таблицы без шапки и подвала.
Если нет смысла группировать основную часть таблицы, то можно обойтись и без тега <tbody>, но мы рекомендуем не делать так. Тег даёт больше контроля над структурой таблицы и стилизацией, а также приучает действовать последовательно.
К тому же браузер всё равно подставит этот тег сам, а всегда полагаться на браузеры — значит оставить место для возможных ошибок.
Пример:
| 1 | Мавзалеев И. В. | 10.09.1992 |
| 2 | Киреева А. Ю. | 02.05.1996 |
| 3 | Корнеев И. Ю. | 09.10.1990 |
| 4 | Тресков В. А. | 25.03.1993 |
| 5 | Ибрагимов А. Е. | 15.10.1994 |
| 6 | Борисенко Д. С. | 10.10.1991 |
В таблице выше шесть строк, каждая из которых содержит три ячейки. Здесь нет важных для смысла признаков, по которым можно сгруппировать содержимое таблицы. Поэтому будет достаточно тега <caption> (придумаем его и скроем) и тега <tbody>, а вот теги <thead> и <tfoot> можно опустить.
Использование position
Как видно, если высота ячеек различается, то ссылка занимает не всю ячейку целиком — ссылка отстаёт от границ на величину padding у td, а высота ссылки равна высоте текста. Чтобы обойти эти ограничения, ячейку надо сделать с относительным позиционированием, а ссылку внутри неё — с абсолютным позиционированием. Размеры ссылки при этом задаются с помощью свойств left, right, top и bottom с нулевым значением — тогда ссылка будет занимать всю область ячейки целиком.
К сожалению, есть и ограничения — ячейка с абсолютно позиционированной ссылкой «схлопывается». Есть два решения:
- задать всей таблице свойство table-layout со значением fixed — ширина всех ячеек при этом станет одинаковой;
- явно установить ширину ячейки со ссылкой через свойство width.
В примере 2 показано добавление table-layout.
Пример 2. Использование position
<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Ячейка как ссылка</title>
<style>
table {
width: 100%; /* Ширина таблицы */
table-layout: fixed;
}
td {
border: 1px solid #333; /* Параметры рамки */
padding: 5px; /* Поля в ячейках */
position: relative; /* Относительное позиционирование */
}
td a {
position: absolute; /* Абсолютное позиционирование */
left: 0; right: 0; /* По ширине ячейки */
top: 0; bottom: 0; /* По высоте ячейки */
background: #D71920; /* Цвет фона */
color: #fff; /* Цвет ссылок */
padding: 5px; /* Поля вокруг текста */
}
</style>
</head>
<body>
<table>
<tr>
<td><a href=»page/new.html»>Ссылка</a></td>
<td>Если для простоты пренебречь потерями на
теплопроводность, то видно, что волновая тень
синхронизирует кварк без обмена зарядами или спинами.</td>
</tr>
</table>
</body>
</html>
Результат данного примера показан на рис. 2.
Рис. 2. Ссылка в ячейке
Данное решение не работает в браузере Internet Explorer, в нём высота ссылки не равна высоте ячейки. Если нужна поддержка IE, то есть следующее решение, работающее и в других браузерах. Сперва вставляем ссылку в <div>.
Затем в стилях дописываем следующие строки.
Сводные заметки с использованием переноса слов и условного форматирования
Я использовал обернуть текст s и с. Однако, похоже, это не работает в ячейках таблицы. У меня есть стол для , с одной строкой и двумя столбцами. Текст в столбцах, хотя стилизован как указано выше , не переносится. Это заставляет текст выходить за пределы ячейки. Это происходит в Firefox, Google Chrome и Internet Explorer.
Вот как выглядит исходник:
Длинное слово выше больше, чем границы моей страницы, но оно не противоречит приведенному выше HTML. Я попробовал следующие предложения по добавлению и , но ни то, ни другое не помогло.
- добавить дефис. Это предварительное сообщение.
- К сожалению, текст там взят из пользовательского контента. Конечно, я мог бы предварительно обработать его и добавить дефис, но я надеялся, что будет лучший способ.
- Прошу прощения за использование слова «дефис». В HTML простой дефис представлен символом «-» (- или -). Мягкий дефис представлен ссылкой на символьный объект (или)
- Вы действительно используете ? Может, это как-то связано с этим.
- 1 Если вы здесь, вы можете также посмотреть на developer.mozilla.org/en-US/docs/Web/CSS/white-space
В Internet Explorer у меня работает следующее
Обратите внимание на добавление Атрибут CSS
- @ewomac да, иногда мне просто нужно игнорировать ошибки VS2010 в отношении HTML / CSS, если я знаю, что они будут работать в браузере.
- 2 @marc !! чувак, большое спасибо за это. Мне было поручено создать мобильную версию клиентского сайта, использующего таблицы, и у меня возникли проблемы с ее работой! table-layout: исправлено свое дело!
- 20 Это делает другие столбцы слишком широкими.
- 2 Обязательно прочтите developer.mozilla.org/en-US/docs/Web/CSS/table-layout Ширина таблиц и столбцов задается шириной элементов table и col или шириной первой строки ячеек. Ячейки в последующих строках не влияют на ширину столбцов. Похоже, это тоже хорошо для производительности.
- 2 @ Clément см. Ниже ответ Индрека о , это исправило для меня.
или же
- Могу подтвердить, что подход Pratik работает и в Safari на iOS (iPhone).
- Чтобы обойти проблему с некоторыми короткими и несколькими длинными словами, вы потенциально можете предварительно обработать текст и заключить только длинные слова (скажем,> 40 символов) в .
- 9 это не поддерживается firefox, opera
- 6 это предпочтительно не разбивалось на символы, не являющиеся словами (например, если бы у меня был ряд более коротких слов, разделенных пробелами, он всегда запускал бы слова прямо до строки, а затем разбивал бы последнее слово пополам). будет ломать слова только при необходимости
- Этот подход лучше, потому что не требует .
Долгий путь, но дважды проверьте с помощью Firebug (или аналогичного), что вы случайно не наследуете следующее правило:
Это может переопределить указанное вами поведение разрыва строки.
- Это то, что было унаследовано и сломало мне перенос слов
- @RickGrundy На что вы его замените, если у вас есть такая проблема?
- 7 @cokedude Я здесь слишком поздно, но уже
- Это вызвало у меня проблему. Спасибо за комментарий, это было полезно.
Заголовок таблицы
Этот тег следует включать в любую таблицу. Где бы вы его ни разместили, его содержимое будет выведено перед таблицей. Изменить это можно с помощью свойства caption-side (значение top — для вывода до таблицы, и bottom — после).
Для единообразия и доступности тег заголовка размещают в самом начале — сразу после тега <table>.
Тег <caption> по умолчанию выравнивает своё содержимое по центру. Чтобы установить выравнивание по левому или правому краю, достаточно поменять значение свойства text-align.
Зачем нужен заголовок?
- Чтобы пользователям было проще ориентироваться на странице — например, когда таблиц много.
- Тег <caption> помогает людям с ограниченными возможностями. По заголовку они получают краткое представление о содержимом таблицы и решают, полезна ли она для них и стоит ли читать её целиком.
- Этот тег влияет на оптимизацию, его любят поисковики.
Примечание. Если дизайнер не предусмотрел заголовок таблицы, то хороший разработчик придумает его, добавит в разметку и скроет через CSS. Это повысит доступность контента.
Даже скрытый заголовок всё равно доступен при навигации по странице с помощью клавиатуры. И речевой браузер для людей с ограниченными возможностями тоже понимает тег <caption> — читая текст в этом теге, он меняет интонацию, темп речи, повышает громкость голоса и тому подобное.
position: sticky;
Элемент с (прикреплённый) позиционируется на основе позиции прокрутки пользователя.
Элемент sticky переключается между и , в зависимости от положения прокрутки. Он позиционируется относительно до тех пор, пока в окне просмотра не будет достигнута заданная позиция смещения, а затем он «закрепится» на месте (например, position:fixed).
Примечание: Internet Explorer, Edge 15 и более ранние не поддерживают position: sticky. Safari требует -webkit-prefix (см. пример ниже). Вы также должны указать хотя бы одно из значений: , , или для работы sticky позиционирования.
В этом примере sticky элемент придерживается верхней части страницы (), когда вы достигнете своей позиции прокрутки.
Пример
div.sticky { position: -webkit-sticky; /* Safari */ position:
sticky; top: 0; background-color: green;
border: 2px solid #4CAF50;}
Как реализовать CSS перенос слов
Перед тем, как реализовать CSS перенос слов, давайте рассмотрим несколько свойств, способных разрешить основную проблему:
word-wrap – описывает, как производить перенос слов, которые по длине не помещаются в установленные размеры контейнера. Сразу стоит предупредить, что с валидацией этого свойства возникают проблемы, и с реализацией его поддержки в CSS консорциум W3C еще не определился. Поэтому специализированные валидаторы при наличии word-wrap в коде будут выдавать ошибку:
Тем не менее, это свойство «воспринимается» всеми современными браузерами и является эффективным решением проблемы переноса длинных слов. word-wrap принимает следующие значения:
- normal – слова не переносятся;
- break-word – автоматический перенос слов;
- inherit – наследование значения родителя.
Пример, иллюстрирующий применение этого свойства:
<style type="text/css">
.container{
background-color: rgb(204,204,204);
padding:10px;
width:200px;
}
.content{
word-wrap: break-word;
}
</style>
</head>
<body>
<div class="container">
<p class="content">метилпропенилендигидроксициннаменилакрилическая кислота</p>
</div>
</body>
В новой спецификации CSS свойство word-wrap было переименовано в overflow-wrap. Оба свойства принимают одинаковые значения. Но поддержка overflow-wrap пока реализована слабо, поэтому лучше использовать старую версию свойства:
Как видно на расположенном выше скриншоте, новое свойство поддерживается Google Chrome, но не поддерживается в IE. Поэтому overflow-wrap лучше не использовать того чтобы реализовать CSS перенос слов.
word-break – устанавливает правила переноса строк внутри контейнера, если они не помещаются в него по ширине. Это новое свойство, и его поддержка была реализована в CSS3. Оно является валидным, но предназначено для работы со строками, поэтому перенос слов может производиться грамматически неправильно.
Свойство принимает три значения:
- normal – используются правила переноса, установленные по умолчанию;
- word-break – перенос строк осуществляется автоматически, чтобы слово поместилось в установленные по ширине размеры контейнера;
- keep-all – отключает автоматический перенос слов в китайском, японском и корейском. Для остальных языков действие значения аналогично normal.
Пример:
<style>
.content {
font-size: 30px;
background: rgb(51,204,153);
width: 170px;
padding: 10px;
word-break:break-all;
}
</style>
</head>
<body>
<div class="content">
<p>Синхрофазотрон</p>
<p>Обеспокоенное состояние</p>
<p>Одиннадцатиклассница</p>
<p>метоксихлордиэтиламинометилбутиламин</p>
</div>
</body>
hyphens – новое свойство, которое появилось с выходом CSS3. Оно устанавливает, как браузер будет осуществлять перенос слов в выводимом тексте. Свойство принимает несколько значений:
- none – отключает CSS перенос слов;
- manual (значение по умолчанию) – слова переносятся в тех участках текстового блока, где это задано с помощью тега <wbr> или мягкого переноса ();
- auto – браузер автоматически переносит слова на основе своих настроек.
Для корректной работы свойства в теге <html> или <p> должен присутствовать атрибут lang со значением «ru» (lang=»ru»).
Свойство поддерживается последними версиями IE, Opera и Firefox. Для каждого из них прописывается своя строчка CSS. Hyphens не поддерживается Google Chrome. Пример:
<style type="text/css">
.container{
background-color: rgb(153,255,204);
padding:10px;
width:200px;
}
.content{
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
}
</style>
</head>
<body>
<div class="container">
<p class="content" lang="ru">метилпропенилендигидроксициннаменилакрилическая кислота</p>
</div>
</body>
Что такое объединение отступов?
Я думаю, что это один из “глюков” CSS, который отнял большую часть моего времени. Полагаю, что вы скажете, что это настолько же странно, как и поведение z-index. Короче говоря, объединение отступов это когда верхний и нижний отступ двух элементов сливаются в наибольший из двух этих отступов. Вообще говоря, вертикальный отступ между двумя блоками рассчитывается так:
margin = max(block1.marginBottom, block2.marginTop)
Видимо, это именно та причина, по которой все работает именно так (как определено и описано в ). Как бы то ни было, иногда мы не хотим, чтобы вертикальные отступы объединялись. Для того, чтобы понять, как это исправить, сперва рассмотрим причину такой проблемы. Объединение отступов случается в трех различных случаях:
Смежные блоки
Когда два смежных блока имеют вертикальные отступы, они объединяются в наибольший отступ из нижнего отступа одного элемента и верхнего отступа второго. Это можно предотвратить несколькими путями:
- clear: left; float: left; для смежных блоков (right тоже работает)
- display: inline-block on siblings (также срабатывает inline-table)
Следующий пример демонстрирует эти фиксы в действии:
Родительский элемент и первый/последний дочерний элемент
Обычно, родительский верхний отступ и верхний отступ первого дочернего элемента объединяются в наибольший отступ. Аналогично, родительский нижний отступ и нижний отступ последнего дочернего элемента объединяются в наибольший. Этот феномен также известен как “объединение предка”. Есть несколько решений для борьбы с таким поведением. Большинство из них состоят в добавлении одного из следующих свойств к родительскому элементу:
- overflow: hidden (или другое, отличное от auto)
- padding: 1px (или любое другое значение, больше 0); некоторые браузеры даже поддерживают субпиксельные значения)
- border: 1px solid transparent (или любая граница)
- display: inline-block (также работают строчные таблицы — inline-table)
- float: left (right также подходит)
Следующий пример демонстрирует эти фиксы в действии:
Пустые блоки
Когда у пустого блока нет ни границы, ни полей, ни высоты — его верхняя и нижняя граница объединяются в одну. В таком случае это подходит под первый или второй случай, которые описаны выше — объединение границ с родителем/смежным элементом. Тем не менее, пустые элементы — тоже, в общем, плохая идея, так что я надеюсь, что вам не придется сталкиваться с ними часто.
Перенос строк текста в HTML через тег
Итак, первый, самый популярный и в то же время специально созданный тег для переноса строк в тексте – это:
Вы могли также видеть этот тег и без слеша (косой черты) на конце:
Они оба одинаково выполняют свою роль, только первый является правильным (валидным) вариантом согласно спецификации XHTML 1.0 (теги, не имеющие закрывающей части, должны содержать слеш на конце).
Пример использования:
Использовать его вы можете сколько угодно раз. Одно использование – один перенос строки, соответственно, два этих тега, поставленные подряд, дают двойной перенос.
Хочется отметить, что при переносе строки таким способом к ней не добавляется дополнительный отступ, который вы можете увидеть при использовании тега <p> (о нем чуть ниже).
Сам по себе тег <br /> имеет поддержку атрибута «clear», который указывает на то, как обрабатывать следующую строку, если текст обтекает плавающий элемент.
Допустимые значения следующие:
all – отменяет обтекание элемента с обоих (левой и правой) сторон.
left – отменяет обтекание элемента с левой стороны.
right – отменяет обтекание элемента с правой стороны.
none – отменяет действие атрибута.
Пример использования:
Обратите внимание, что если вы хотите сделать большой разрыв между двумя строками – использование тега является не лучшим решением. Суть тега – перенос строки, а не задание отступов
Приемлемое количество подряд используемых тегов (на мой взгляд) – 1–2.
Управлять переносом слов при hyphens: auto;
15 комментариев:
Анонимный Хорошая статья. Спасибо! NMitra Рада слышать! Анонимный здорово, спасибо Vit Simak white-space: pre-wrap; очень помогает, но только если он один указан или максимум с word-wrap: break-word; Анонимный ыва Людмила Горбач ваваы Максим Дунаевский Вот спасибо! Поправил свою CSS как тут написано — текст на кнопках стал нормально отображаться. NMitra Пожалуйста, рада помочь. Анонимный Спасибо, хорошая статья. Анонимный kjgtfrfghjkl Анонимный ‘); drop table forum; — lol NMitra Чего-чего? Дмитрий lang=»ru» лучше писать в
-webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; hyphens: auto; word-wrap: break-word; NMitra Спасибо за дополнение! Dmitry Mycelin «’); drop table forum; — lol»Это гугловская форма комментариев вообще-то.
Бывает необходимо запретить переносить текст по строкам если он не помещается по ширине. Это можно сделать с помощью тега nobr:
Этого же можно добиться при помощи CSS-стиля white-space, заданного текстовому элементу-контейнеру. Например:
Второй вариант более предпочтителен (тег nobr отсутствует в стандарте XHTML).
Труднопереносимыми бывают не только люди, но и слова. К примеру, химическое соединение метилпропенилендигидроксициннаменилакрилическая кислота очень похожа на некоторых людей с « подвывертом »! Не знаем, как справляться с такими трудными личностями, но с переносом слов CSS точно поможет:
