[Перевод] Первый взгляд на новое свойство CSS «дефис» в 2019 году

внешний интерфейс Программа перевода самородков

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

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

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

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

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

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

.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;
}

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

слишком много дефисов

Самая большая проблема с дефисами заключается в том, что часто используются простые дефисы. Это означает следующий пример, в котором объединяется слово Иосиф (или Иосиф), но это выглядит не очень хорошо и даже затрудняет чтение текста.

Über Josef Hauser

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

Я не уверен, почему они придумали это значение по умолчанию, но теперь у нас есть такое значение. К счастью, решение было определено в спецификации -Свойство ограничения символов дефиса.
Он указывает минимальное количество символов в слове с дефисом, поэтому мы можем использовать его для переопределения значения по умолчанию 5 (длина слова) 2 (до дефиса) 2 (после дефиса).

Таким образом, теоретически мы могли бы использовать следующую конфигурацию, чтобы использовать дефисы только для слов из 10 или более символов и разрывать только до или после четырех символов:

hyphenate-limit-chars: 10 4 4;

На самом деле это свойство по-прежнему поддерживается только с префиксом -ms в Internet Explorer 10+ и Edge. Улучшенная поддержка символов через дефис была бы действительно здоровой — поэтому, пожалуйста, сообщите своему любимому браузеру, что вы этого хотите, спасибо! Ниже приведеныChromium and here for FirefoxЭта проблема.

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

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

18 января 2018 г. Обновлено: ДобавленоAlexander Rutzа такжеJiminy PanozИнформация о похожих свойствах браузеров webkit, как описано.

Если вы обнаружите ошибки в переводе или в других областях, требующих доработки, добро пожаловать наПрограмма перевода самородковВы также можете получить соответствующие бонусные баллы за доработку перевода и PR. начало статьиПостоянная ссылка на эту статьюЭто ссылка MarkDown этой статьи на GitHub.

Программа перевода самородковэто сообщество, которое переводит высококачественные технические статьи из Интернета сНаггетсДелитесь статьями на английском языке на . Охват контентаAndroid,iOS,внешний интерфейс,задняя часть,блокчейн,товар,дизайн,искусственный интеллектЕсли вы хотите видеть более качественные переводы, пожалуйста, продолжайте обращать вниманиеПрограмма перевода самородков,официальный Вейбо,Знай колонку.

Категории