Как сделать переносы слов с тире?

Question

[Legal Adviser]

Всем привет.
Озадачился с тем вопросом как лучше сделать вывод текста (заголовок, отрывок и т.п.).
Есть скажем блок на 200px внутри которого выводятся списком ссылки. Ссылки конечно имеют слова (2-10шт.)
И вот возникает проблема с уложением такого текста, т.к. в рамках ширины блока при text-align: justify; получается с огромными пробелами между словами.
Пример:

Автомобильные          шторки 
и  тонировка  стекол  в   авто

При text-align: left;
Пример:

Автомобильные шторки
и тонировка стекол в авто

Если ставим

-ms-word-break: break-all;
    word-break: break-all;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;

То при text-align: justify; получается перенос слов без тире.
Пример:

Автомобильные шторки и тони
ровка стекол в авто

Согласитесь, не очень удобно так читать, и удобнее если бы вывод был бы в виде:

Автомобильные шторки и тони-
ровка стекол в авто

Хочу знать, кто и как с этим борется, поэтому пишите пожалуйста.

Answer 1

[lUser L]

UPD: DEMO

Если это лендинг можно попробовать добавить &shy
минус в том , что приходиться в ручную вставлять в текст, но как вариант я все же предложил

Автомобильные шторки и тони&shyровка стекол в авто

Comments

[Legal Adviser]

знаю и про

тони&shyровка

, но это не вариант для "автотекста", т.е. когда заранее не известно где будет разрыв слова и какого именно слова. А ведь весьма интересно было бы решение, где автоматом вывод был бы с учётом морфемного разбора слова. Ведь тогда бы, в нужном месте переносимого слова автоматом подставлялся бы ­.

[Legal Adviser]

????Эмиль???? Гасанов, пример привёл в следующем своём комменте с приложением скриншота.

[lUser L]

Legal Adviser, но ведь этот вариант подходит под ваши требования - https://codepen.io/5h4dy_s/pen/ZEGVozG
любой текст, любой длинны он автоматически обрабатывает, и судя по счетчику вы даже не смотрели этот пример

[lUser L]

[Legal Adviser]

????Эмиль???? Гасанов, Смотреть пробовал. Но открывался ранее только сайт кодпен.
Сейчас посмотрел, соглашусь с тем, что как вариант можно рассмотреть, но по всей видимости что-то там нужно дополнить, т.к. рассчитано на гласные/согласные и не учитываются суффикс + корень + приставка + окончание. Хотя может это моё предвзятое отношение на первый взгляд, т.к. пока не разбирался с кодом.
Тем не менее - отмечу вариант решением.

Answer 2

[Александр]

Статья о переносах

Answer 3

[Владислав Лысков]

css hyphens: auto

Comments

[Legal Adviser]

Не работает этот вариант в браузерах, поэтому и задал этот вопрос.

[xonar]

Legal Adviser, Работает, но только не на хромиуме. На лисе и т.д. работает. Надеюсь, что пофиксят это на хромиуме и будет всем счастье. Хотя с 2017 года обещают пофиксить)