W3docs
ru
Войти

CSS свойство hyphens

Use hyphens CSS property to know how to hyphenate the words. Learn more about property values and see examples.

Свойство hyphens определяет, как слова должны переноситься при переносе текста на новую строку.

Свойство hyphens может принимать три значения: none, manual, auto. Оно позволяет запретить переносы слов, разрешить их или разрешить только при наличии определенных символов.

info

Правила переноса слов явно не определены в спецификации, поэтому переносы могут отличаться в разных браузерах.

Начальное значениеnone
Применяется коВсем элементам.
НаследуетсяДа.
АнимируемоеНет.
ВерсияCSS3
Синтаксис DOMObject.style.hyphens = "none";

Синтаксис

Синтаксис свойства CSS hyphens

hyphens: none | manual | auto | initial | inherit;

Пример свойства hyphens:

Пример использования свойства CSS hyphens со значениями none, manual и auto

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        width: 55px;
        border: 1px solid #666;
      }
      p.none {
        hyphens: none;
      }
      p.manual {
        hyphens: manual;
      }
      p.auto {
        hyphens: auto;
      }
    </style>
  </head>
  <body>
    <h2>Hyphens property example</h2>
    <h3>none</h3>
    <p class="none">An extreme&shy;ly lengthy sentence</p>
    <h3>manual</h3>
    <p class="manual">An extreme&shy;ly lengthy sentence</p>
    <h3>auto</h3>
    <p class="auto" lang="en">An extreme&shy;ly lengthy sentence</p>
  </body>
</html>
Попробуйте сами »

Результат

Свойство CSS hyphens

В данном примере использованы все три значения, чтобы наглядно показать разницу.

info

Для современных браузеров префиксы больше не требуются.

Возможности переноса строк

С помощью двух приведенных ниже символов Unicode мы можем вручную задать потенциальные точки переноса внутри текста:

U+00AD (SHY/Мягкий дефис)

Этот символ отображается невидимо. Он указывает место, где браузер должен разорвать слово, если требуется перенос. Для вставки SHY используйте ­.

U+2010 (HYPHEN/Жесткий дефис)

Этот символ указывает на видимую возможность переноса строки. Дефис отображается даже в том случае, если строка не разрывается в этой точке.

Значения

ЗначениеОписание
noneПереносы запрещены. Слова не разрываются при переносе строк, даже если символы указывают на такие точки.
manualСлова разрываются только для переноса строк там, где внутри слова есть возможности для переноса. Слова переносятся только на &hyphen; или &shy.
autoБраузер автоматически разрывает слова в подходящих точках переноса. Слова переносятся там, где это решает алгоритм. Поведение значения auto зависит от языка.
initialЗаставляет свойство использовать значение по умолчанию.
inheritНаследует свойство от родительского элемента.

Практика

Практика

Какова цель свойства 'hyphens' в CSS?