#css
#css
Вопрос:
Не уверен, правильно ли я формулирую это.
Прямо сейчас я использую следующий CSS для переноса длинных слов на моей веб-странице, что работает довольно хорошо:
overflow-wrap: break-word;
word-wrap: break-word;
-webkit-hyphens: auto;
-ms-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
Однако я хотел бы иметь запасной вариант, который пытается переместить все слово (и последующие слова) на следующую строку, если следующее слово может поместиться в строку, в отличие от разрыва / переноса любого слова у края моего контейнера, независимо от длины.
В принципе, вот что происходит:
————————
Быстрая
лиса прыгает
на ленивую собаку
, иногда
ужасно длинное слово
————————
Чего бы я хотел, так это:
————————
Быстрая
коричневая лиса перепрыгивает
через ленивую
собаку
, иногда
ужасно длинное слово
————————
Возможно ли это с помощью CSS?
Комментарии:
1. Применяется ли у вас какой-либо другой CSS или какой браузер вы используете? Если я попробую ваш код в Chrome, я получу пример, который вам нужен (т. Е. Только Очень длинные разрывы слов), но без дефисов.
Ответ №1:
Это возможно с помощью html amp;shy; . К сожалению, он не читает мысли — необходим жесткий код.
В любом месте, в котором вы разрешаете разрыв слова amp;shy; , без пробелов — он невидим в html. Если слово не подходит — hyphen на этом этапе оно будет прервано с помощью nice.
(Я не знаю, откуда - в вашем примере — мой браузер просто ломается)
word-wrap word-break и hyphens полезны для длинных ссылок (и поддерживаются не полностью). При необходимости вы можете использовать комбинацию
p{ width: 100px; border: 1px solid red; margin: 0 50px; display: inline-block} <p>The quick brown fox jumps over the lazy dog. Somereallyamp;shy;ridicoulosly long word</p>
<p><b>This_one_is_without_shy</b> Auxeruntamp;shy;haecamp;shy;vulgiamp;shy;sordidiorisamp;shy;audaciam, quodamp;shy;cumamp;shy;ingravesceretamp;shy;penuria </span>