Как сделать перенос слов на русском языке на javascript (hyphens)


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

Суровое настроящее. CSS cвойство word-break

Автоматический топорный перенос слов (без добавление дефисов).

Интересуемые значения свойства:

  • break-all
    Автоматический перенос всех слов, текст выглядик как выровненный по ширине.
  • break-word (используется на этом сайте в заголовках)
    Перенос отдельных слов, которые не поместилось в заданную ширину блока.

Светлое будущее. СSS cвойство hyphens

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

Интересуемые значения:

  • manual (используется по умолчанию)
    Слова переносятся только в тех местах текста, где добавлен спецсимвол &shy (мягкий перенос) или тег . Спецсимволы вручную расставляются в тексте, не видны в обычном тексте и если слово не помещается, браузер в месте нахождения спецсимвола создаёт перенос. Спецсимвол &shy при переносе слова добавлять дефис (как учили в школе), а тег нет.
  • auto
    Браузер добавляет переносы автоматически на основе встроенного словаря. До сих пор слабая поддержка браузерами, в хроме не работает(.

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

Существует обратная задача — запретить переносы. Например, не отделять инициалы от фамилии или единицы измерения от значений (100 кг). Чтобы браузер не добавлял переносы, следует вместо обычного пробела написать неразрывный пробел &nbsp

Также у CSS свойства hyphens существует значеие none , когда слова не переносятся, даже при наличии в тексте мягких переносов.

Похожие записи

Как установить будильник на компьютере с Windows 10?

В операционной системе windows 10 есть встроенный будильник. Он так и назыается «Будильник и часы». Cочетает такие функции, как будильник, мировое время, таймер и секундомер.

Улучшение контрастности темы Material Theme редактора Visual Studio Code

Для Visual Studio Code есть несколько тем в стиле материального дизайна, и все они с недостатками: либо некорретная подстветка синтаксиса, либо проблемы с контрастностью.

CSS свойство hyphens

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

CSS синтаксис

Возможные значения

Значение Описание
none Слова не переносятся, даже при наличии в тексте мягких переносов ­.
manual Значение по умолчанию. Переносы слов в тексте происходят в тех местах, где добавлен ­ или , если их нет, то переносы не делаются.
auto Браузер автоматически добавляет переносы слов на основе встроенного словаря переносов.

Пример

Устанавливаем автоматические перенносы слов

Как в CSS решить проблему длинных слов

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

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

Переносы

Первое решение для длинных слов — это применение переносов.

Поддержка браузерами: CSS -переносы поддерживаются во всех популярных браузерах, за исключением браузеров, реализованных на основе движка Blink ( Chrome, Opera, Android ). Здесь описаны все распространенные ошибки в Chrome . Я также протестировал Safari 5.1 под Windows , в котором переносы поддерживаются, но для моих тестовых слов все они добавлялись не в тех местах, в которых нужно.

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

Вы также можете использовать библиотеку JavaScript , такую как Hyphenator.js , которая работает со многими языками и многими браузерами. Недостатком этого решения является то, что вам нужно будет загружать много дополнительных скриптов JavaScript , что может существенно снизить производительность.

word-break

Так как не все браузеры полностью поддерживают перенос слов, давайте попробуем это свойство CSS , которое указывает, следует ли разрывать строки внутри слов:


Поддержка браузерами: Свойство CSS word-break поддерживается во всех браузерах , за исключением Opera Mini и старых браузеров Opera на основе Presto .

Overflow-wrap

Еще одно возможное решение данной проблемы — использование word-wrap ( overflow-wrap ). Еще одно свойство, которое указывает, может ли браузер разбивать строки внутри слов:

Поддержка браузерами: Свойство CSS word-wrap поддерживается во всех браузерах . В некоторых из них для нормальной работы требуется указывать унаследованное имя word-wrap (а не overflow-wrap ).

Эллипсис

Еще один вариант для решения проблемы длинных слов — это усечение:

Поддержка браузерами: Text-overflow поддерживается во всех основных браузерах .

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

Пожалуйста, не используйте text-overflow : ellipsis , потому что сокращать слова — это не работа CSS . Только, если вам действительно необходимо это сделать на стороне сервера, и только после полного сокращения слов.

Заключение

Я проверил все приведенные выше примеры и их сочетания в следующих браузерах: IE7 , IE8 , IE9 , IE10 , IE11 , Edge , Firefox 39 ( Windows, Linux, Mac ), Chrome 44 ( Windows, Linux, Mac ), Opera 30 ( Windows, Mac ) , Safari 8 ( Mac ), Safari 5.1 ( Windows ), Android-5 ( Nexus 6 ), Android 4.4 ( Nexus 5 ), Android 2.3 ( Galaxy S2 ), IOS 8.3 ( iPhone 6 ), IOS 7 ( iPhone 5S ), IOS 6 ( iPhone5 ), Opera Mini ( Android 5 ), Opera Classic ( Android 5 ), Opera Mobile ( Android 5 ) и Windows Phone 8.1 ( Lumia 930 ), используя реальные устройства и BrowserStack . По этой ссылке вы найдете список всех 26-браузеров, по этой ссылке — результаты их тестирования.

В интернете можно найти и такое решение :

Хотя это прекрасно работает в большинстве случаев, я выяснил, что в Firefox перенос не будет работать ( хотя он и поддерживается ) в сочетании с word-break . Как и word-break , это свойство не поддерживается, и не будет работать в Opera Mini .

В то же время overflow-wrap прекрасно поддерживается браузерами. Я протестировал следующее решение, используя overflow-wrap и перенос.

Окончательное решение

Этот код выводит переносы во всех браузерах, в которых они поддерживаются, и разрывы строк во всех остальных. Хотя я и протестировал это решение в 26 различных браузерах, но до сих пор не уверен, что оно будет работать в 100% случаев — если вы найдете какое-нибудь исключение, пожалуйста, дайте знать об этом в комментариях к статье.

Данная публикация представляет собой перевод статьи « Dealing with long words in CSS » , подготовленной дружной командой проекта Интернет-технологии.ру

просто блог

Мягкие переносы слов специальным HTML символом

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

Наш текст будет выглядеть примерно так:

Не на­чать ли нам, братья, по-ста­ро­дав­не­му скорб­ную по­весть о по­хо­де Иго­ре­вом, Иго­ря Свя­то­с­ла­ви­ча! Или да нач­нет­ся песнь ему по бы­лям на­ше­го вре­ме­ни — не по за­мыш­ле­нию Бо­я­но­ву! Ведь Бо­ян ве­щий ког­да песнь ко­му сло­жить хо­тел, то бел­кою ска­кал по де­ре­ву, се­рым вол­ком по зем­ле, си­зым ор­лом кру­жил под об­ла­ка­ми. По­ми­нал он дав­них вре­мен ра­ти — тог­да пус­кал де­сять со­ко­лов на стаю ле­бе­дей; ка­кую до­го­нял со­кол, та пер­вая песнь пе­ла ста­ро­му Яро­с­ла­ву, храб­ро­му Мсти­с­ла­ву, что за­ре­зал Ре­де­дю пред пол­ка­ми ка­сож­ски­ми, крас­но­му Ро­ма­ну Свя­то­с­ла­ви­чу. Бо­ян же, братья, не де­сять со­ко­лов на стаю ле­бе­дей пус­кал, но свои ве­щие пер­сты на жи­вые стру­ны воз­ла­гал; они же са­ми князь­ям сла­ву ро­ко­та­ли.

И вот что получается:

Не на­чать ли нам, братья, по-ста­ро­дав­не­му скорб­ную по­весть о по­хо­де Иго­ре­вом, Иго­ря Свя­то­с­ла­ви­ча! Или да нач­нет­ся песнь ему по бы­лям на­ше­го вре­ме­ни — не по за­мыш­ле­нию Бо­я­но­ву! Ведь Бо­ян ве­щий ког­да песнь ко­му сло­жить хо­тел, то бел­кою ска­кал по де­ре­ву, се­рым вол­ком по зем­ле, си­зым ор­лом кру­жил под об­ла­ка­ми. По­ми­нал он дав­них вре­мен ра­ти — тог­да пус­кал де­сять со­ко­лов на стаю ле­бе­дей; ка­кую до­го­нял со­кол, та пер­вая песнь пе­ла ста­ро­му Яро­с­ла­ву, храб­ро­му Мсти­с­ла­ву, что за­ре­зал Ре­де­дю пред пол­ка­ми ка­сож­ски­ми, крас­но­му Ро­ма­ну Свя­то­с­ла­ви­чу. Бо­ян же, братья, не де­сять со­ко­лов на стаю ле­бе­дей пус­кал, но свои ве­щие пер­сты на жи­вые стру­ны воз­ла­гал; они же са­ми князь­ям сла­ву ро­ко­та­ли.

Самое замечательное в этих мягких переносах — почти полная кроссбраузерность. Ну а минус — текст увеличивается в 2-3 раза. Конечно этот минус сейчас не столь актуален во времена терабайтных дисков и безлимитных каналов связи.

И тогда же, во времена мамонтов я задумался написать скриптик для переносов, однако ввиду отсутствия дикой необходимости так и не написал, да и поискать я как-то не удосужился всё по той же причине. Но, оказывается уже есть созданный плагин для WordPress — Hypho-o automatic hyphenation. Плагин доступен для скачивания на wordpress.org. Так же для нуждающихся в «автоматических мягких» переносах, но не работающих на WP, есть страничка для онлайн расстановки переносов от ком­па­нии Qlikworld (Спасибо топику на хабре). Пытливые умы думаю смогут адаптировать и сам плагин для своей любимой CMS.

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

Как видно, это всё было актуально еще 3-4 года назад. Многие и пытались «украсить» сайт переносами слов ради чего даже писали плагины. Некоторые, как я, просто задумывались об этом. Но время идет. Мезозойская эра закончилась, мамонты вымерли…ну почти вымерли �� И в наш век информационных технологий пришли HTML5 и CSS3. И благодаря этим достижениям нанотехнологий, при поддержке разработчиков браузеров и HTML5/CSS3 стандартов — нам на помощь пришли CSS3 переносы строк.

Что же это за CSS3 переносы строк? Да это некая противоположность white-space. Теперь нам доступно новое CSS3 свойство hyphens.

Для того, чтобы переносы расставлялись сами, нам достаточно у необходимого параграфа (блока) указать:

Конечно, не все тут так сладко. Многие браузеры до сих пор не поддерживают это свойство. А в русскоязычном сегменте дела обстоят хуже, чем в англицком сегменте. И на данный момент переносы работают только в Firefox’е и только с префиксои (если вы читаете эту запись с ОгнеЛиса, то должны были переносы слов во всех статьях блога). Но начало положено.

И если вы хотите, чтобы уже сейчас переносы работали в ОгнеЛисе, а в ближайшем времени и в других браузерах (когда они станут поддерживать переносы) — вы можете воспользоваться таким кодом:

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

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


Для пессимистов

Сейчас очень популярна так называемая «Газетная верстка» (дизайн) и Адаптивный дизайн. Вот тут-то и будет очень востребованы переносы. А конкретнее — для узких столбиков. А в сочетание с Multi-column оно как нельзя необходимо.

Ссылки по теме:

Пожертвовать

Понравилась статья или у Вас куры денег не клюют (потому что нет кур)? Не жадничай, поделись!

Интересно узнать, что в моде газетная верстка. Статья полезная, очень пригодилась при верстке макета.+1

CSS правила работают не везде, в хроме — точно нет.
Плюс к тому — ­ также не везде работает, как должен бы, лучше подходит символ из юникода. Есть крохотный jquery плагин на 20 строчек ,который добавляет в уже готовый текст на стороне клиента, в браузере «возможные переносы» в текст

Ну раз такая пьянка, то JS работает не во всех браузерах ��

А вообще система (правила) расстановки переносов очень сложная, особенно в русском языке. Там очень много нюансов.
К сожалению не все браузеры поддерживаю пока переносы, но используя метод с готовыми наборами правил, которые в любом случае будут заложены в браузерах, можно быть уверенным, что они будут наиболее правильными, а не «абы-кабы».

А данный плагин на JQ (хотя там от jQ только две с половиной строчки) стоит рассматривать как альтернатива мягким переносам, описанным в начале статьи. Или как инструмент вместо CSS hyphens. Или как дополнительные инструмент, в помощь CSS hyphens, но тогда обязательно в него надо внедрить проверку на поддержку CSS hyphens браузером.

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

Скрипт переноса по слогам не работает

Подключил ссылки на .js (jquery.hypher.js и en-us.js) в head, добавил этот код скрипта в body:

HTML и CSS в норме. Что-то делаю не так?

Добавлено через 56 минут
Пожалуйста, подскажите как вставить код из jsfiddle себе на сайт.

Javascript
18.10.2020, 16:00

После переноса сайта не работает скрипт
Доброе утро. CMS Netcat, сайт целиком перенесен на другой хостинг, база скопирована потаблично.

Скрипт переноса данных
Здравствуйте, помогите пожалуйста понять в чём проблема, есть скрипт, в котором есть вот такой вот.

Необходимо доработать скрипт переноса файлов
Нужно доработать скрипт: For %%a in (*.png) do md «%%

na» Для примера даны.

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

После переноса домена перестал работать скрипт
На странице есть скрипт, который добавляет «да» и «нет» к комментариям После переноса домена.

18.10.2020, 16:01 2
18.10.2020, 16:11 [ТС] 3

4. Вставил ссылки в .html на внешние файлы этого проекта jsfiddle (jquery.hypher.js и en-us.js).

Javascript
18.10.2020, 16:14 4
18.10.2020, 16:14
18.10.2020, 16:18 [ТС] 5
18.10.2020, 16:47 6

ещё не добавлен на страницу, поскольку его описание идёт ниже (36 строка). Поэтому выборка $(‘p’) будет пустая.

18.10.2020, 18:47 [ТС] 7

ещё не добавлен на страницу, поскольку его описание идёт ниже (36 строка). Поэтому выборка $(‘p’) будет пустая.


Спасибо, jquery подключил в самом начале, а с 34 строкой что нужно сделать?

Добавлено через 1 час 39 минут
До сих пор не работает. Есть кто-нибудь помочь?

18.10.2020, 20:34 8

попадает в DOM. Либо поместите ваш код в коллбек $(document).ready(), либо перенесите его в конец страницы.

18.10.2020, 20:41 [ТС] 9
18.10.2020, 20:49 10
18.10.2020, 20:51 [ТС] 11

Исправил подключение jquery, вставил в начало. Не помогло.

Добавлено через 1 минуту
Теперь у меня на странице это:

За*дача та*кая. Есть бло*ки с тек*сом, в них рус*ский текст, не всег*да уме*ща*ет*ся пра*виль*но, по*это*му нуж*но сде*лать пе*рено*сы слов. Для всех бра*узе*ров кро*ме chrome есть свой*ства CSS: -moz-hy*phens, -we*bkit-hy*phens, -ms-hy*phens. А мне нуж*но сде*лать то*же са*мое толь*ко для chrome. Сде*лать это луч*ше на javascript, в ко*тором я не раз*би*ра*юсь.У ме*ня на сай*те ус*та*нов*лен jQuery. Под*ска*жите воз*можно есть ка*кой-то пла*гин для не*го, что*бы сде*лать пе*ренос строк и что*бы ра*бота*ло для рус*ско*го ал*фа*вита.

Т. е. слова просто поделены на слоги.

А английский текст работает отлично, с переносами.

hyphens

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

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

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

Синтаксис ?

Обозначения

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

×

Значения

Пример

Результат примера в браузере Internet Explorer показан на рис. 1.

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

Объектная модель

Примечание

Internet Explorer и Edge поддерживают свойство -ms-hyphens .

Chrome и Opera поддерживают только значение auto и только на платформах Android и Mac.

Safari поддерживает свойство -webkit-hyphens .

Firefox поддерживает свойство -moz-hyphens .

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

Спецификация Статус
CSS Text Level 3 Рабочий проект

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

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

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


×

Браузеры ?

10 12 55 42 5.1 6 43

Браузеры

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

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

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

Расстановка переносов в html тексте на русском языке

Существует серия правил css для разных браузеров hyphens, -moz-hyphens, -webkit-hyphens, -ms-hyphens

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

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

Перенос слов в css/js

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

Вот некоторые решения, которые я нашел в Интернете, и почему они не работают для меня:

  • переполнение: скрытое/авто/прокрутка. Мне нужен весь текст, который будет видимым без прокрутки. Div может расти вертикально, но не горизонтально.
  • Инъекция и застенчивость; в строку через js/server-side — & shy; теперь поддерживается FF3, но копирование и вставка URL-адреса с помощью & shy; в середине не будет работать в Safari. Кроме того, насколько мне известно, нет чистого метода измерения ширины текста, чтобы найти наилучшие смещения строк, чтобы добавить эти символы (там один хакерский путь, см. Следующий пункт). Другая проблема заключается в том, что масштабирование в Firefox и Opera может легко нарушить это.
  • сбрасывая текст в скрытый элемент и измеряя offsetWidth — связанный с элементом выше, он требует добавления дополнительных символов в строку. Кроме того, измерение количества прерываний, требуемых в длинном тексте, может потребовать тысячи дорогостоящих вставок DOM (по одной для каждой длины подстроки), что может эффективно заморозить сайт.
  • с использованием моноширинного шрифта — снова, масштабирование может испортить вычисления ширины, и текст не может быть оформлен свободно.

Вещи, которые выглядят многообещающими, но не совсем там:

  • word-wrap: break-word — теперь часть рабочего проекта CSS3, но он не поддерживается либо Firefox, Opera или Safari. Это было бы идеальным решением, если бы оно работало во всех браузерах сегодня: (
  • инъекции теги в строку через js/server-side — копирование и склеивание URL-адресов работает во всех браузерах, но у меня все еще нет хорошего способа измерить, где положить перерывы. Кроме того, этот тег недействителен HTML.
  • добавление перерывов после каждого символа — это лучше, чем тысячи вложений DOM, но все же не идеально (добавление элементов DOM в документ сжигает память и замедляет селекторные запросы, между прочим).

Есть ли у кого-нибудь больше идей о том, как решить эту проблему?

Делай перенос строки в javascript по правилам, без ошибок в коде

Доброго времени суток, гости блога и верные подписчики. Сегодняшняя статья посвящена разбору простенькой, но полезной темы, а именно «Перенос строки в JavaScript». Вроде кажется, что в данном вопросе не могут возникнуть какие-либо проблемы. Однако это не так. Из-за привередливости и особенностей некоторых инструментов языка JS перенос текста может выполнятся по-разному.

Поэтому я расскажу вам, как осуществить перенос текстового контента на новую строку в операции alert, как удобно записывать код в программе, какие вспомогательные инструменты понадобятся при работе с document.write (), а также при использовании DOM команд и объектов. Ну что ж, вперед за дело!

Редактирование программного кода

Иногда возникают такие ситуации, когда в скрипте после выполнения какого-то условия необходимо вставить определенный кусок html-кода. Однако просто разрывать строку нажатием Enter нельзя. Для этого существует несколько вариантов.

Первый вариант – это использование символа обратного слеша (\). Согласитесь, это очень удобный и быстрый метод для структурирования кода.

Свойство -ms-hyphens

Свойство -ms-hyphens — задает способ, каким происходит расстановка переносов внутри слов. Переносы могут расставляться как автоматически (например, браузер может содержать словарь переносов), так и использоваться специальные символы, кроме того поддерживается режим полного запрета переносов. Данное свойство наследуется, и применяется ко всем элементам, но оказывает влияние только на элементы с текстовым содержанием. По умлочанию используется значение manual. Свойство -ms-hyphens является экспериментальным расширением браузера Internet Explorer, и впервые было представлено в Internet Explorer 10.

Допустимые значения

  • none — Режим полного запрета переносов — никакие слова не разбиваются, даже если внутри них содержатся специальные символы, а разрывы строк ставятся только между слов.
  • manual — Ручная расстановка переносов — слова разбиваются только в местах расстановки специальных символов
  • auto — Автоматическая расстановка переносов — браузер может автоматически вставлять переносы строк в любом подходящем месте, но преимуществом пользуются позиции со специальными символами.

Служебные символы расстановки переносов

  • U+2010 (HYPHEN) — «Жесткий» перенос, визуально обозначающий дефисом место переноса. Данный символ отображается всегда, даже в том случае, если строка в данном месте не разрывается.
  • U+00AD (SHY) — «Мягкий» перенос, визуально не обозначающий. Данный символ распологается в местах предпочтительного переноса строк, если есть такая необходимость.

Свойство -ms-hyphens определено в спецификации CSS 3 модуль Text Level 3 (текст, уровень 3), применяется к всем элементам, и действует на всех визуальные носителях, его значение наследуется от родительского элемента в иерархии документа, и по умолчанию принимает значение manual. Является расширением движка Trident (браузер Internet Explorer), и не совместимо с другими браузерами.

Топ-пост этого месяца:  Вы знаете эти 8 HTML5 тегов
Добавить комментарий