Меню админ-ресторана

Содержание:

Отправить статью
- - - 17 комментариев к записи
Делаем html код удобным.
Особенности текста в HTML
Переносы слов | htmlbook.ru
Управление переносами
Всё, что нужно знать об автоматических переносах в CSS
Строки кода в блоке
Переносы слов
Как сделать CSS перенос слова на следующую строку?
word-wrap | CSS | WebReference
Свойство white-space
Свойство word-break
Свойства
- - hyphens
  - white-space
Перенос слов CSS (свойства overflow-wrap, word-wrap, word-break, hyphens) — Примеры
- - В чём состоит различие одно свойства от другого
- Не переносить слова на другую строку
Свойство writing-mode
Управление переносами
Управлять переносом слов при hyphens: auto;
- 15 комментариев:
Как включить автоматические переносы
- 1. Установка языка
- 2. Включение переносов

Отправить статью

17 комментариев к записи

Интересное и главное простое решение, надо запомнить, возможно пригодится в работе.

Юрий, спасибо! Очень ценная информация. Но как понять для какого браузера выбрать нужный код?

Елена, вот список префиксов, которые работают с этим свойством в разных браузерах:

p -webkit-hyphens: auto; /* для браузера Chrome и Safari */ -moz-hyphens: auto; /* для браузера Firefox */ -ms-hyphens: auto; /* для браузера Internet Explorer 10 */ hyphens: auto; > Но вам нужно писать обязательно все 4 свойства! Чтобы во всех этих браузерах был перенос слов.

вот и начали бы с себя..

Вам неудобно читать текст на моём сайте?

ни одного переноса в статье нет)

Переносы слов еще зависят от разрешения монитора: может быть такая ситуация, что на большом мониторе нет необходимости переносить слова, потому что они и так хорошо смотрятся.

Для примера я уменьшил ширину окна браузера (фото ниже):

Всё правильно человек написал:

Только это пока рабочий проект (см. – https://webref.ru/css/hyphens ), поэтому некоторый браузеры поддерживают это свойство, а некоторые – нет.

На большом мониторе под Windows – не работает, а вот на планшете Lenovo Yoga Tablet 2 – переносы работают…

Юрий, спасибо! Но у меня не перенос слов получился, а просто текст стал ровнее (каждая строчка точно вписывается от первой буквы первого слова, до последей буквы последнего в каждой строке), поразительно!

Я смотрю, это за счет увеличения пробелов. Видно у меня там еще какое-то правило прописано.

В приличных печатных изданиях переносы слов осуществляются по правилам русского языка. Видимо, CCS3 применяет какой-то общий алгоритм переноса для всех языков?

Надо для меню задать правило — переносим на новую строку все слова кроме первого.

2. Когда не помещаются

Виноват. Не для меню, а для названия модуля.

Ребят, на самом деле, если у вас не работают переносы, дело тут не в ширине окна браузера. Словарь переносов хранится в браузере и подключается только при наличии атрибута lang с кодом языка. Так, для русского языка следует добавить lang=»ru» к элементу или непосредственно к абзацу текста.

Переносы не работают в Chrome и Opera.

Единственное кросс-браузерное решение — это вставить мягкие переносы (мнемокод «») в места, где вы допускаете вставлять дефис и разбивать слово с последующим переносом в случае возможности (если ширина позволяет). Можно воспользоваться сервисом автоматической расстановки мягких переносов , вставляете, например, там текст «расставить переносы правильно» и получаете готовый html — «расставить переносы правильно» его вставляете у себя на сайте. Всё будет переноситься предсказуемо и кросс-браузерно.

Можете в сервисе ограничить длину слова в которых необходимо расставить мягкие переносы, если хотите разбивать только длинные слова. Потом можно это текст опять редактировать, просто вставив на том же сервисе туда, где его скопировали и т.д.

Источник

Делаем html код удобным.

Контекстное меню

Сейчас наш код понятен и легко читаем, так как в нем мало текста и практически нет тегов. Когда мы создадим более сложную страницу, то там будет много тегов, соответственно найти нужный будет сложно.

Чтобы не было каши из тегов, нужно изначально расставлять теги и строки так, чтобы они визуально воспринимались легче. Когда браузер считывает информацию с html страницы, ему без разницы сколько пробелов и сколько пустых строк в коде.

Я изменил текст в коде страницы относительно той, которую мы создавали, но это не важно. На левом и на правом рисунке изображен один и тот же код

Оба варианта будут отображаться браузером на экране монитора абсолютно одинаково. Согласитесь, работать с кодом изображенным справа будет гораздо легче, чем с тем, что слева.

Рассматриваемый нами код очень простой, но даже сейчас заметна разница в визуальном восприятии. Каких-либо определенных правил «наведения порядка» нет, каждый мастер сам решает как ему удобнее работать.

Особенности текста в HTML

Как выровнять горизонтальное меню по центру?

Прежде чем редактировать код веб-страницы, следует принять во внимание некоторые особенности, которые присущи HTML при работе с текстом. Любое количество пробелов идущих подряд, в браузере отображается как один

Любое количество пробелов идущих подряд, в браузере отображается как один

Сколько бы вы не поставили пробелов между словами, это никак не повлияет на конечный вид текста. То же правило относится к символам табуляции и переносу текста. Приведённые ниже строки будут отображаться на веб-странице одинаково, несмотря на их разное написание.

<p>Измеряй микрометром. Отмечай мелом. Отрубай топором.</p>
<p>Измеряй микрометром. Отмечай мелом. Отрубай топором.</p>
<p>Измеряй микрометром.
Отмечай мелом.
Отрубай топором.</p>

Исключением из этого правила является элемент <pre>, содержимое которого отображается именно так, как оно указано в коде, с учётом всех пробелов. По этой причине <pre> часто применяется для фрагментов программ, где важны пробелы (пример 1).

Пример 1. Использование <pre>

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>pre</title>
</head>
<body>
<pre>public boolean shouldOverrideUrlLoading(WebView view, String url) {
if (url.startsWith(«http://») || url.startsWith(«https://»)) {
view.getContext().startActivity(new Intent(Intent.ACTION_VIEW, Uri.parse(url)));
return true;
} else {
return false;
}
}</pre>
</body>
</html>

Результат данного примера показан на рис. 1.

Рис. 1. Текст внутри <pre>

Текст занимает всю ширину окна браузера

Если вы просто напишете одну длинную строку в коде HTML, то в браузере она будет отформатирована так, чтобы текст поместился по ширине. Под форматированием подразумевается автоматическое добавление переносов текста там, где есть пробел или дефис. Соответственно, переносы текста будут меняться в зависимости от диагонали экрана устройства и размеров окна браузера.

Переносы слов | htmlbook.ru

Как сделать выпадающее меню на html и css

В отличие от текста в полиграфии, на веб-странице редко применяются переносы, поскольку мы не привязаны жёстко к формату бумаги. Сайты могут смотреть на разных мониторах, с разным разрешением, в разных операционных системах и браузерах. Всё это порождает такое сочетание комбинаций, что предугадать, как будет выглядеть конечный текст для пользователя невозможно. Из-за этого обычно текст выравнивается по левому краю, а переносы происходят словами целиком. Но всё же переносы слов в некоторых случаях нужны, например, когда применяются длинные химические или медицинские термины, в узких колонках заданной ширины, ради эстетики. В HTML и CSS ручных или автоматических способов добавления переносов не так уж и много, так что перечислю все.

Использование тега <wbr>

Тег <wbr> введён в HTML5 и создаёт перенос слов при необходимости. В тех местах, где по правилам русского языка допустим перенос, вставляем <wbr> (пример 1). Если слово целиком помещается в отведённую ширину, этот тег никак себя не проявит и о его наличии мы даже не узнаем. Если слово не помещается, браузер в месте нахождения тега <wbr> создаёт перенос.

Пример 1. Тег <wbr>

Результат данного примера показан на рис. 1.

Рис. 1. Текст с переносами слов

Мягкий перенос

Применение <wbr> имеет серьёзный недостаток — понять, перенос перед нами или отдельное слово на другой строке, нельзя. Из-за этого может потеряться смысл предложения и его неправильно поймут. Переносы надо делать по правилам типографики, а именно: в конце строки добавлять дефис. С этим отлично справляется мягкий перенос, в коде HTML для него имеется спецсимвол . Он выполняет ту же роль, что и тег <wbr> — не виден в обычном тексте и переносит слово на другую строку, при этом добавляя дефис (пример 2).

Пример 2. Мягкий перенос

Результат данного примера показан на рис. 2. Заметьте, насколько эстетичнее и понятнее стал выглядеть текст в сравнении с рис. 1.

Рис. 2. Текст с переносами слов

Свойство word-break

Чтобы автоматизировать процесс создания переносов воспользуйтесь свойством word-break со значением break-all (пример 3). Добавлять какие-либо символы или теги в HTML уже не придётся, всё берут на себя стили.

Пример 3. Применение word-break

Результат данного примера показан на рис. 3. Правила переносов текста в этом случае не учитываются, поэтому слова могут переноситься весьма причудливым образом.

Рис. 3. Текст с переносами слов

Из всех перечисленных способов «полуручной» с использованием  даёт наилучший результат — соблюдаются правила русского языка, текст выглядит наиболее эстетично. Пользуйтесь им, когда в тексте встречаются длинные слова.

Свойство hyphens

И, наконец, самое мощное и удобное свойство для автоматического добавления переносов — hyphens. Его действие основано на встроенном в браузере словаре переносов, поэтому даёт наилучший результат. Поддерживается в IE10, Firefox, Android и iOS. Chrome и Opera не поддерживают. Чтобы это всё работало, для тега <html> добавляем атрибут lang со значением ru (пример 4).

Пример 4. Использование hyphens

Результат данного примера показан на рис. 4.

Рис. 4. Текст с переносами слов

Запрет переносов

Нередко возникает и обратная задача — запретить переносы в тех местах, где они по правилам языка недопустимы. Например, нельзя отрывать единицы измерения от числа (10 мл), обозначение года (54 до н. э.), инициалы от фамилии, разрывать устойчивые сокращения (т. д.) и др. Чтобы браузер не добавлял переносы в месте пробела, его следует заменить на неразрывный пробел   (пример 5).

Пример 5. Использование  

В данном примере для корректного написания координат используется  , который не позволяет переносить текст.

Управление переносами

Но недостаточно просто включить функцию в CSS. В спецификациях CSS Text Module Level 4 появилась возможность управлять переносами, как в программах для вёрстки (например, InDesign) и некоторых текстовых редакторах (включая Word). Эти элементы управления позволяют разными способами установить количество переносов в тексте.

Ограничение длины слова и количества символов до и после переноса

Если переносить короткие слова, их труднее читать. Точно так же вы не хотите отрывать от слова маленький кусочек. Общепринятое эмпирическое правило состоит в том, чтобы переносить только слова длиной не менее шести букв, оставляя не менее трёх символов до переноса и не менее двух на следующей строке.

hyphenate-limit-chars в действии

В настоящее время это свойство поддерживает только IE/Edge (с префиксом), а Safari ограничивает количество символов через устаревшее свойство из предыдущего черновика CSS3 Text Module. Это означает, что вы можете добиться одинакового эффекта в Edge и Safari (с перспективным планированием для Firefox) с помощью такого кода:

Уменьшение количества дефисов путём установки зоны переноса

Рассмотрим абзац, выровненный по левому краю. Правый край неровный, что частично исправляется переносами. По умолчанию будут переноситься все слова, которые разрешено переносить, что обеспечивает максимальное выравнивание правого края. Если вы готовы смириться с небольшим нарушением выравнивания, можно уменьшить количество переносов.

Для этого нужно указать максимальное допустимое количество пробелов между последним словом строки и краем текстового поля. Если в данном пространстве начинается новое слово, оно не переносится. Это пространство известно как зона переноса. Чем больше зона переноса, тем сильнее неровность и тем меньше переносов. Регулируя зону, вы ищете оптимальное соотношение между количеством дефисов и заполнением строки.

Слева: стрелки указывают строки, где перенос разрешён. Справа: перенос с заданной зоной переноса

В настоящее время поддерживается только в IE/Edge (с префиксом).

Всё вместе

С помощью свойств CSS Text Module Level 4 установим для абзаца те же параметры управления переносами, как в обычных программах для вёрстки:

C соответствующими префиксами и откатами код выглядит так:

Перенос — идеальный пример прогрессивного улучшения. Эти свойства можно активировать уже сейчас, если вы считаете, что читатели выиграют от этого. Поддержка браузеров постепенно увеличится. Если вы разрабатываете сайт на языке с длинными словами, как немецкий, читатели точно будут благодарны.

Всё, что нужно знать об автоматических переносах в CSS

Недавно меня пригласили выступить с вечерней лекцией в Типографском обществе Австрии. Для меня стало большой честью последовать по стопам таких светил, как Мэтью Картер, Вим Краувел, Маргарет Калверт, Эрик Шпикерман и покойная Фреда Сэк.

Я рассказал о некоторых золотых правилах типографики в интернете, а потом во время секции QA меня спросили о текущей ситуации с автоматическими переносами в вебе. Это хороший вопрос, особенно с учётом того, что немецкий язык знаменит часто используемыми длинными существительными (например, Verbesserungsvorschlag означает «предложение для улучшения»), поэтому переносы широко используются в большинстве письменных носителей.

В вебе автоматические переносы появились в 2011 году и теперь широко поддерживаются. Safari, Firefox и Internet Explorer 9 поддерживают их на всех платформах, а Chrome — на Android и MacOS (пока нет на Windows или Linux).

Строки кода в блоке

Строки кода в теге по умолчанию не переносятся. Это может вызвать неприятности в статьях блога и технических электронных книгах на мобильном, например.

По моему опыту, обычно решение зависит от того, на каком языке этот код, и вообще от задачи, но эти проблемы можно обойти при помощи принудительных переносов (без дефиса!) или горизонтального скроллинга. Методом проб и ошибок можно понять, какое точное сочетание свойств нужно тому или иному браузеру. Убедитесь, что значение случайно не переопределилось на одно из тех, при которых пробелы схлопываются, потому что это может оказаться значимым для синтаксиса кода.

Также я нарвалась на проблемы с адаптивностью при оформлении кода для github (gist), который особенно коварен из-за того, что это table. В таких случаях я понимаю, что мне придётся применить особенное оформление для переопределения контейнера таблицы.

Переносы слов

Как сделать CSS перенос слова на следующую строку?

Осуществить перенос слова можно при помощи CSS свойства word-break.
У данного CSS свойства может быть несколько значений:

Normal – значение по умолчанию, то есть перенос слова не осуществляется и если оно не помещается в блок с текстом, то просто вылезет за его пределы.
Например:

Выглядит не очень! Не правда ли ?!
break-all – переносит часть слова на следующую строку если оно не помещается в блоке с текстом.

Вот что получится:

Здесь ну oооооооооооооооочень длинное слово, которое не плохо было бы перенести на новую строку при помощи CSS.
inherit – в этом случае наследуется то значение, которое стояла у родительского элемента, то есть у того блока или тега, внутри которого размещён блок с текстом.

Сам HTML кода блока с текстом для переноса в моём случае выглядит вот так:

XHTML

<div class=»perenos»>
Здесь ну oооооооооооооооочень длинное слово, которое не плохо было бы перенести на новую строку при помощи CSS.
</div>

1
2
3

Здесь ну oооооооооооооооочень длинное слово, которое не плохо было бы перенести на новую строку при помощи CSS.
</div>

А вот CSS код для переноса текста, который записывается в файл стилей вашего шаблона или страницы сайта:

CSS

.perenos {
border:3px solid #245488;
margin:20px auto;
padding:10px;
width:170px;
word-break:break-all;
}

1
2
3
4
5
6
7
8

.perenos {

border3pxsolid#245488;

margin20pxauto;

padding10px;

width170px;

word-breakbreak-all;

}

Всё бы ничего, но вот только переносы расставляются без знака «-» в конце строки и не по правилам.

word-wrap | CSS | WebReference

Свойство word-wrap указывает, переносить или нет длинные слова, которые не помещаются по ширине в заданную область.

Краткая информация

Значение по умолчанию	normal
Наследуется	Да
Применяется	Ко всем элементам
Процентная запись	Неприменима
Анимируется	Нет

Обозначения

	Описание	Пример
<тип>	Указывает тип значения.	<размер>
A && B	Значения должны выводиться в указанном порядке.	<размер> && <цвет>
A \| B	Указывает, что надо выбрать только одно значение из предложенных (A или B).	normal \| small-caps
A \|\| B	Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.	width \|\| count
	Группирует значения.
*	Повторять ноль или больше раз.	*
+	Повторять один или больше раз.	<число>+
?	Указанный тип, слово или группа не является обязательным.	inset?
{A, B}	Повторять не менее A, но не более B раз.	<радиус>{1,4}
#	Повторять один или больше раз через запятую.	<время>#

Значения

normal: Строки не переносятся или переносятся в тех местах, где явно задан перенос (например, с помощью <br>).
break-word: Перенос строк добавляется автоматически, чтобы слово поместилось в заданную ширину блока.

Результат данного примера показан на рис. 1.

Рис. 1. Перенос длинных слов

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
Draft (Черновик спецификации) — первая черновая версия стандарта.

Браузеры

В таблице браузеров применяются следующие обозначения.

— свойство полностью поддерживается браузером со всеми допустимыми значениями;
— свойство браузером не воспринимается и игнорируется;
— при работе возможно появление различных ошибок, либо свойство поддерживается лишь частично, например, не все допустимые значения действуют или свойство применяется не ко всем элементам, которые указаны в спецификации.

Число указывает версию браузера, начиная с которой свойство поддерживается.

Свойство white-space

Распространенная ошибка начинающих веб-разработчиков — пытаться редактировать текст пробелами или нажатиями клавиши Enter, а потом удивляться, почему их усилия не видны на странице. Сколько бы вы раз ни нажали «Ввод», браузер это проигнорирует

Но есть способ заставить его отображать текст так, как нужно вам, и принимая во внимание все интервалы

В документе CSS перенос строки, назначенный с помощью свойства white-space, можно настроить так, чтобы он осуществлялся с учетом пробелов или нажатия клавиши «Ввод». White-space со значением pre-line заставит браузер видеть в тексте Enter.

Если поменять pre-line на pre-wrap в коде CSS, перенос строки произойдет с учетом пробелов. И наоборот, запретить любой перенос, присвоив тексту свойство white-space со значением nowrap:

Свойство word-break

Пример 3. Применение word-break

Рис. 3. Текст с переносами слов

Из всех перечисленных способов «полуручной» с использованием даёт наилучший результат — соблюдаются правила русского языка, текст выглядит наиболее эстетично. Пользуйтесь им, когда в тексте встречаются длинные слова.

Свойства

В конце концов при решении проблем с переносом текста остается некий типичный «список подозреваемых». Одни довольно очевидные и логичные, а другие — нет. Одни делают свое дело сами по себе, а другие не очень.

Итак, давайте взглянем.

Свойство принимает в виде значений два ключевых слова: (по умолчанию) и . Это в дополнение к трём глобальным значениям , и .

По умолчанию слишком длинное слово не разрывается. Браузер не влияет на такое слово, что выглядит замечательно, пока мы не сталкиваемся с мобильными. Хотя размер контейнера может подстраиваться под слово, оно в итоге вывалится из его границ и приведёт к страшной горизонтальной прокрутке на всей странице.

В первом примере этого демо можно наглядно увидеть поведение по умолчанию:

Второй пример на этом демо включает объявление , приказывающее браузеру разбить слово перед возможным переполнением своего контейнера.

Важно заметить: было заменено на , но значения остались прежними. И взгляните

Насколько я поняла, свойство нужно только для того, чтобы как-то по-особому форматировать текст на китайском, японском и корейском языках.

Я применяла для разбивки длинных слов, но правильным свойством (если вы не работаете с дальневосточным текстом) будет более общее вышеупомянутое .

hyphens

Свойство hyphens рассказывает браузеру, как расставлять дефис при переносе, и допускает следующие значения: , и , которые в настоящий момент , поэтому вам, видимо, придётся запустить FireFox.

Значение гарантирует, что в слова никогда не будет подставляться символ переноса.

При значении дефис выставляется в месте переноса только при наличии указывающего на это символа. Указать это можно, вставив символ либо жёсткого, либо мягкого переноса в нужное место в разметке.

Жёсткий перенос () прикажет слову разорваться в определённом месте при необходимости, но всё в любом случае будет отображаться на экране.

Мягкий перенос () делает тоже самое, но фактически не отображает дефис на экране, что, как правило, предпочтительнее.

При значении слова можно разбивать либо в явно указанных местах, либо автоматически, в соответствии с правилами расстановки переносов для конкретного языка, указанными в специальных файлах (если они предусмотрены в браузере). Расстановка переносов специфична для языка, и для документа нужно определять атрибут .

white-space

У каждого из нас есть любимые CSS-свойства, на которые можно положиться, словно на запасной выход с надписью «При аварии разбить стекло молотком», чтобы выбраться из запутанной ситуации; см. также и . Для меня таким свойством является .

Это свойство указывает правила обработки пробельных символов (пробелы, табы, переводы строки) в элементе. Что порой может вдруг оказаться невероятно полезным, например, при отладке, или чтобы лучше контролировать содержимое ячеек таблицы.

У этого свойства бывает пять значений: (по умолчанию), , , и .

Взглянуть на эти свойства в действии можно в примере ниже: учитывайте добавочные пробельные символы в разметке.

По умолчанию пробельные символы схлопываются в один пробел и строки разбиваются, чтобы уместиться в контейнер; как видно в первом демо-примере, в тексте есть лишние пробелы, но они не отображаются.

(пример 2) также игнорирует дополнительные пробелы, но зато не разбивает строку текста на границах контейнера.

учитывает все пробельные символы в разметке, и не разбивает строки (как видно выше в примере 3).

(пример 4) учитывает добавочные пробелы, но заставляет строку разбиваться.

(последний пятый пример) схлопывает пробельные символы (кроме перевода строки) и принуждает «цепочку» текста умещаться в контейнер.

На CSS—Tricks есть удобная табличка, которая поможет всё это резюмировать.

Перенос слов CSS (свойства overflow-wrap, word-wrap, word-break, hyphens) — Примеры

Указанные ниже свойства CSS определяют как переносить длинные слова:

только там, где стоит чёрточка, пробел или Enter (искл., неразрывный пробел и неразрывный дефис ). Между частями одного слова пишется дефис (например, красно‐жёлтый), между словами — тире. «Мягкий дефис» проявляется только при необходимости переноса. Если слово выходит за рамки родителя, то или переносит его часть без чёрточки. В математических выражениях используется минус (например, 5 − 2). В номерах телефонов отображается цифровая чёрта (например, +7 800 000‒00‒00). И всё это не является той знакомой -, что есть на клавиатуре.
после любого символа.
согласно правилам русского языка с автоматическим применением дефиса.

В чём состоит различие одно свойства от другого

По умолчанию длинные слова не переносятся, если на то нет явных указаний с помощью дефиса, и начинаются с новой строки.

Для того, чтобы игнорировались черточки, сразу видимые глазу, вносим .

Для того, чтобы браузер не обращал внимания и на мягкий дефис, вставляем .

Если требуется перенос слов, то советую применять всегда, поскольку он понимается всеми браузерами. Он отличается от , которое является приоритетным, тем, что слова, которые не помещаются в блок, начинаются с новой строки и учитывается рекомендация мягкого дефиса.

При совместном использовании с , последнее игнорируется. расставляет любые дефисы по своему усмотрению. Но для того, чтобы оно работало, нужно обозначить свой язык, указав в div атрибут .

Не переносить слова на другую строку

Скажем, пункт меню или кнопка будут нехорошо выглядеть, если разъедутся на части. Поэтому надо запретить их разделение. Для чего все вышеуказанные свойства следует поставить в режим «по умолчанию» и добавить white-space: pre; или white-space: nowrap;. Нажмите на white-space: nowrap; и посмотрите на наш полигон.

<div lang="ru">Тетрагидропиранилциклопентилтетрагидропиридо<span>пиридино</span>вые</div>

<style>
.hyphens {
  -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; /* пока поддерживает только Firefox */ 
  text-align: justify;
}
.nohyphens {
  white-space: nowrap;
}
</style>

Свойство writing-mode

Оно определяет, имеют ли строки текста горизонтальную или вертикальную ориентацию, и может принимать три значения:

horizontal-tb;
vertical-lr;
vertical-rl.

Использование writing-mode предусматривает наличие двух ключевых понятий:

Block Flow Direction: указывает направление, в котором текстовые блоки располагаются внутри своего родителя (сверху вниз, слева направо или справа налево;
Inline Flow Direction: определяет направление символов внутри строки текста и место начала новой строки (может быть как горизонтальным, так и вертикальным).

Чтобы добиться вертикальной ориентации текста, достаточно установите для свойства writing-mode значение vertical-lr (или vertical-rl), а для text-orientation — upright.

XHTML

<div class=»block»>
<p class=»horizontal-tb»>Образец текста</p>
<p class=»vertical-rl»>Образец текста</p>
<p class=»vertical-lr»>Образец текста</p>
</div>

1
2
3
4
5

<p class=»horizontal-tb»>Образец текста</p>

<p class=»vertical-rl»>Образец текста</p>

<p class=»vertical-lr»>Образец текста</p>

</div>

CSS

.block {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
margin: auto;
font-size: 2rem;
color: #fff;
background: #000;
}

.horizontal-tb {
writing-mode: horizontal-tb;
}

.vertical-rl {
writing-mode: vertical-rl;
}

.vertical-lr {
writing-mode: vertical-lr;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

.block {

display flex;

justify-content center;

align-items center;

text-align center;

margin auto;

font-size 2rem;

color #fff;

background #000;

}

.horizontal-tb {

writing-mode horizontal-tb;

}

.vertical-rl {

writing-mode vertical-rl;

}

.vertical-lr {

writing-mode vertical-lr;

}

Управление переносами

Ограничение длины слова и количества символов до и после переноса

hyphenate-limit-chars в действии

Уменьшение количества дефисов путём установки зоны переноса

Слева: стрелки указывают строки, где перенос разрешён. Справа: перенос с заданной зоной переноса

В настоящее время поддерживается только в IE/Edge (с префиксом).

Всё вместе

C соответствующими префиксами и откатами код выглядит так:

Управлять переносом слов при 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»Это гугловская форма комментариев вообще-то.

Источник

Как включить автоматические переносы

Автоматические переносы запускаются в два шага. Первый — установить язык для текста. Это сообщит браузеру, какой использовать словарь. Для корректных переносов нужен словарь переносов, соответствующий языку текста. Если браузер не знает языка текста, то рекомендации CSS говорят не активировать переносы, даже если они включены в таблице стилей.

1. Установка языка

Язык веб-страницы устанавливается с помощью атрибута HTML lang :

Это лучший способ установки языка для всех веб-страниц, включены там переносы или нет. Установка языка поможет инструментам для автоматического перевода, скринридерам и другим вспомогательным программам.

Атрибут lang=»en» применяет языковой тег ISO, сообщая браузеру, что текст на английском языке. В этом случае браузер выберет дефолтный английский словарь переносов, что обычно соответствует переносам и в американском английском. Хотя американский и британский английский заметно отличаются в орфографии и произношении (и, следовательно, переносах), но разница не такая существенная, как между вариантами португальского. Проблема решается добавлением «региона», чтобы браузер знал, какой вариант английского наиболее подходит в качестве словаря переносов. Например, чтобы указать бразильский португальский или британский английский:

2. Включение переносов

После установки языка можно включить автоматические переносы в CSS. Это исключительно просто:

В настоящее время Safari и IE/Edge требуют префиксов, поэтому прямо сейчас следует написать так: