Перенесення слів css (властивості overflow-wrap, word-wrap, word-break, hyphens) - приклади

overflow-wrap ▼ break-word word-wrap ▼ break-word word-break ▼ keep-all break-all line-break ▼ loose normal strict hyphens ▼ none auto

вже переосвідетельствовался наш тисячадевятьсотдевяностодевятікілограммовий корчеватель # 8208; бульдозер # 8208; навантажувач

У чому полягає відмінність одне властивості від іншого

За замовчуванням довгі слова не переносяться, якщо на те немає явних вказівок з допомогою дефіса, і починаються з нового рядка.

Для того, щоб ігнорувалися рисочки, відразу видимі оку, вносимо word-break: keep-all ;.

Для того, щоб браузер не звертав уваги і на м'який дефіс, вставляємо hyphens: none ;.

Якщо потрібно перенесення слів, то word-wrap: break-word; раджу застосовувати завжди, оскільки він розуміється всіма браузерами. Він відрізняється від word-break: break-all ;. яке є пріоритетним, тим, що слова, які не поміщаються в блок, починаються з нового рядка і враховується рекомендація м'якого дефіса.

При спільному використанні word-break: break-all; з hyphens: auto ;. Останнім ігнорується. hyphens: auto; розставляє будь дефіси на свій розсуд. Але для того, щоб воно працювало, потрібно позначити свою мову, вказавши в div атрибут lang = "ru".

Чи не переносити слова на інший рядок

Скажімо, пункт меню або кнопка будуть недобре виглядати, якщо роз'їдуться на частини. Тому треба заборонити їх поділ. Для чого всі вищезгадані властивості слід поставити в режим "за замовчуванням" і додати white-space: pre; або white-space: nowrap ;. Натисніть на white-space: nowrap; і подивіться на наш полігон.

Управляти перенесенням слів при hyphens: auto;

Тетрагідропіранілціклопентілтетрагідропірідо піридин ші