Как обрабатывать мягкий перенос только на телефонах?

Question

[MegaMufa]

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

Чтобы избавится от широких пробелов использую символ мягкий перенос (­). Но переносы нужны только на телефонах.

Собственно вопрос. Можно ли сделать так, чтобы знаки переноса обрабатывались при @media (max-width: 700px)? Или каким-либо другим способом выключить их обработку на широких экранах?

Answer 1

[gassmonkey]

Только костыль - заключать их в span, и удалять его, когда не нужен.

Answer 2

[Денис Васильев]

Блин, думал получиться с помощью hyphens: none; но на вебкитах не работет (( — caniuse.com/#feat=css-hyphens
Вот пример, в мозилле работает
codepen.io/corvus-007/pen/rxYYLp?editors=110