Как сделать перенос слов на русском языке на javascript (hyphens)
Переносы слов в HTML
Суровое настроящее. CSS cвойство word-break
Автоматический топорный перенос слов (без добавление дефисов).
Интересуемые значения свойства:
- break-all
Автоматический перенос всех слов, текст выглядик как выровненный по ширине. - break-word (используется на этом сайте в заголовках)
Перенос отдельных слов, которые не поместилось в заданную ширину блока.
Светлое будущее. СSS cвойство hyphens
Правила переносов определяются словарём встроенным в браузер. Свойство работает при наличии атрибута lang с кодом языка на уровне всего документа или отдельных его частей.
Интересуемые значения:
- manual (используется по умолчанию)
Слова переносятся только в тех местах текста, где добавлен спецсимвол ­ (мягкий перенос) или тег . Спецсимволы вручную расставляются в тексте, не видны в обычном тексте и если слово не помещается, браузер в месте нахождения спецсимвола создаёт перенос. Спецсимвол ­ при переносе слова добавлять дефис (как учили в школе), а тег нет. - auto
Браузер добавляет переносы автоматически на основе встроенного словаря. До сих пор слабая поддержка браузерами, в хроме не работает(.
Запрет переносов
Существует обратная задача — запретить переносы. Например, не отделять инициалы от фамилии или единицы измерения от значений (100 кг). Чтобы браузер не добавлял переносы, следует вместо обычного пробела написать неразрывный пробел  
Также у 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:
| Javascript | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| 18.10.2020, 16:00 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
После переноса сайта не работает скрипт Скрипт переноса данных Необходимо доработать скрипт переноса файлов na» Для примера даны. Скрипт переноса файла в новую папку с датой После переноса домена перестал работать скрипт |
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| 18.10.2020, 16:01 | 2 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| 18.10.2020, 16:11 [ТС] | 3 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
