Каждое слово с новой строки css – Как предотвратить перенос каждого слова на новую строку у абсолютно спозиционированного элемента?

Содержание

примеры кода и поддержка браузерами

CSS Hyphenation - перенос слов в 2019 году

От автора: недавно я работал над веб-сайтом, который использовал большие заголовки (имеется в виду размер шрифта), а также был доступен на немецком языке. Это означает, что часто на нем встречались довольно длинные слова, и они часто не помещались в контейнер. Если ничего не делать, это «сломало бы» макет, так как появилась бы горизонтальная полоса прокрутки. Итак, я перечитал статью, которую написал почти четыре года назад о работе с длинными словами и реализовал окончательное решение.

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

Поддержка браузерами

Поддержка CSS Hyphenation довольно хорошая. Следует помнить, что, хотя они работает в браузерах на основе Chromium на платформах Mac и Android, в настоящий момент (январь 2019 года) это не работает в Windows и Linux. Они также не работают в Opera Mini и некоторых других мобильных браузерах (браузер Blackberry, IE mobile и т. д.), Но в целом поддержка стабильная.

Использование переносов CSS

Чтобы сегодня использовать дефисы, нам все еще нужно добавлять префиксы для IE / Edge / Chromium, поэтому лучше использовать следующее для каждого текста, который должен использовать дефисы:

CSS Hyphenation - перенос слов в 2019 году

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

.hyphenate { -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; }

.hyphenate {

  -webkit-hyphens: auto;

  -ms-hyphens: auto;

  hyphens: auto;

}

Поскольку вы, вероятно, хотите разбивать слова, а не макет в неподдерживаемых браузерах, я рекомендую следующее. Таким образом, все слова будут переноситься в поддерживающих браузерах и разбиваться на новые строки в неподдерживающих.

.hyphenate { overflow-wrap: break-word; word-wrap: break-word; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; }

.hyphenate {

  overflow-wrap: break-word;

  word-wrap: break-word;

  -webkit-hyphens: auto;

  -ms-hyphens: auto;

  hyphens: auto;

}

Теперь, когда мы знаем, как сегодня использовать CSS Hyphenation, давайте посмотрим, чего нам не хватает, чтобы сделать его еще лучше.

Слишком много переносов слов

Самая большая проблема, с которой мы столкнулись, заключалась в том, что CSS Hyphenation слишком часто переносил слова. Что это означает, показывает следующий пример, здесь он переносит слово Josef, которое выглядит не очень хорошо. Это также затрудняет чтение текста и, следовательно, делает его менее доступным.

CSS Hyphenation - перенос слов в 2019 году

CSS Hyphenation - перенос слов в 2019 году

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Это связано с тем, что, если UA (пользовательский агент) не может рассчитать лучшее значение, предполагается, что hyphens: auto означает два символа для до и после переноса и пять для слова в целом. Это означает, что для каждого слова длиной не менее пяти символов будет использоваться перенос, и он будет разбивать слова до двух символов после / до переноса.

Я не уверен, почему они придумали эти значения по умолчанию, но сейчас мы имеем именно это. Существует решение, которое уже определено в спецификации — свойство hyphenate-limit-chars.

Оно определяет минимальное количество символов в слове с переносом, и поэтому мы можем использовать его для переопределения значения по умолчанию 5 (длина слова) 2 (до разрыва) 2 (после разрыва). Таким образом, теоретически мы могли бы применить следующее, чтобы использовать переносы только для слов с 10 символами и более четырех символов до / после переноса:

hyphenate-limit-chars: 10 4 4;

hyphenate-limit-chars: 10 4 4;

В действительности это свойство все еще поддерживается только в Internet Explorer 10+ и в Edge с префиксом -ms. Было бы здорово получить лучшую поддержку для hyphenate-limit-chars — так что, пожалуйста, сообщите вашим любимым браузерам, что вы этого хотите — спасибо! Здесь это можно сделать для Chromium, а здесь для Firefox.

Дополнительное примечание: Webkit-браузеры (Safari) поддерживают свойства -webkit-hyphenate-limit-before, -webkit-hyphenate-limit-after и -webkit-hyphenate-limit-lines, которые позволяет также определить минимальную длину, а также минимальное количество символов до / после переноса.

Как вы можете видеть, поддержка CSS Hyphenation довольно неплоха в 2019 году. Единственная проблема для меня — отсутствие поддержки свойства hyphenate-limit-chars, что, как мы надеемся, улучшится в будущем, когда его будет запрашивать достаточное количество пользователей / разработчиков.

Обновление от 28.01.2018: добавлена информация о похожих свойствах браузеров на основе webkit, на что указывают Александр Рутц и Джимини Паноз.

Автор: Michael Scharnagl

Источник: https://justmarkup.com/

Редакция: Команда webformyself.

CSS Hyphenation - перенос слов в 2019 году

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее CSS Hyphenation - перенос слов в 2019 году

PSD to HTML

Практика верстки сайта на CSS Grid с нуля

Смотреть

Где всё сложно с переносами строк. Вот все CSS- и HTML-хитрости для этого — CSS-LIVE

Перевод статьи Where Lines Break is Complicated. Here’s all the Related CSS and HTML. с сайта css-tricks.com для CSS-live.ru, автор — Крис Койер

Скажем, есть действительно длинное слово в каком-то тексте, у контейнера которого недостаточно ширины для него. Типичная причина этого — длинный URL, просочившийся в текст. Что происходит? Зависит от CSS. Как этот CSS управляет раскладкой и как он этим текстом распоряжается.

Вот как может выглядеть ситуация с не поместившимся текстом:

Текст, вылезающий из бокса — визуальная проблема.

Первое решение — overflow: hidden;, как этакий «лобовой» прием, чтобы не дать тексту (и чему угодно) высовываться. Но от этого пострадает доступность текста. В некоторых десктопных браузерах для выделения текста можно три раза кликнуть на нем мышью, но не каждый может об этом знать и не всегда такое возможно.

Название свойства «overflow» — «переполнение» — здесь весьма к месту, ведь именно оно, переполнение, у нас и происходит. Ещё есть overflow: auto;, приводящее к горизонтальному скроллу. Иногда может и подойди, но наверняка вы тоже согласитесь, что обычно это решение неприемлемо.

Нам нужно, чтобы этот зараза длинный URL (или любой текст) разорвался, чтобы перенестись на следующую строку. Варианты есть! Для начала подготовим место, где мы будем со всем этим разбираться.

Экспериментальная площадка

Здесь я взял блок с содержимым, размер которого можно менять, и решил соединить его с разными CSS-свойствами и их значениями, которые можно включать/выключать, чтобы увидеть, как это влияет на содержимое.

Уверен, что этот список неполный и не идеальный. Это лишь некоторые из знакомых мне свойств.

See the Pen Figuring Out Line Wrapping by Максим (@psywalker) on CodePen.

Кувалда: word-break: break-all;

Позволяет словам разрываться везде. Свойство word-break «решает» проблему:


p {
word-break: break-all;
}

В переписке по электронной почте fantasai пояснила, что это работает, поскольку свойство

word-break меняет определение того, что считать словом. Значение break-all по сути воспринимает любой текст как восточноазиатский, который может переноситься практически где угодно (кроме точек в конце предложений и закрывающих скобок). Значение keep-all, наоборот, воспринимает восточноазиатские иероглифы как буквы в слове, а не как целые слова.

Прицельное решение: overflow-wrap: break-word;

Свойство overflow-wrap кажется наиболее эффективным решением для данной проблемы.


p {
  word-wrap: break-word; /* old name */
  overflow-wrap: break-word;
}

На первый взгляд это может походить на демо с word-break: break-all; выше, но заметьте, как в URL оно не разрывает «pen» как «pe\n», а делает перенос в конце этого слова, рядом со слешем.

fantasai объясняет:

Если слово не может разорваться, переполняя контейнер, оно может разорваться где угодно во избежание переполнения.

Решение потяжелее, иногда: hyphens: auto;

Свойство hyphens может иногда решить проблему с URL-адресами и длинными словами, но это не точно. На длинном числе, например, он споткнется. Вдобавок, hyphens влияет на весь текст, позволяя себе вольности в разрывах ради того, чтобы сделать правый край текста более ровным.


p {
hyphens: auto;
}

fantasai сказала мне:

Если «слово» находится в конце строки, его можно переносить через дефис.

Думаю, это «слово» в кавычках дает подсказку, в чем тут проблема. Некоторые неприемлемо длинные строки — не «слова», поэтому это решение — не панацея.

Будущая кувалда: line-break: anywhere;

Есть свойство line-break. В основном, кажется оно для пунктуации, но ни в одном браузере оно у меня не заработало. fantasai сказала мне, что появится новое значение anywhere, которое:

«как word-break: break-all;» за исключением того, что она на самом деле разрывает всё, как примитивная программа на терминале.

Другие решения в HTML

Элемент <br> разобъёт строку где угодно, если только у него не будет display:none.

Элемент <wbr> — «возможный разрыв слова», что означает, что длинному слову, обычно вызывающему раздражающую проблему с переполнением можно сказать, чтобы оно разорвалось в конкретном месте. Полезно! Оно ведёт себя, как пробел нулевой ширины.

Другие решения на CSS

Символ ­&shy; делает то же самое, что и элемент <wbr> (На самом деле не совсем, поскольку, в отличие от <wbr>, ­ добавляет дефисы при переносе. — прим. перев.)

Можете вставить разрыв строки с помощью псевдоэлемента ::before { content: "\A"; }, если только элемент не строчный (в противном случае потребуется white-space: pre;)

P.S. Это тоже может быть интересно:

Как создать перенос слов CSS — абзацы с переносом слов CSS