Указанные ниже свойства CSS определяют как переносить длинные слова:
- только там, где стоит чёрточка, пробел или Enter (искл., неразрывный пробел
и неразрывный дефис‑
). Между частями одного слова пишется дефис (например, красно‐жёлтый), между словами — тире. "Мягкий дефис"­
проявляется только при необходимости переноса. Если слово выходит за рамки родителя, то<wbr>
или​
переносит его часть без чёрточки. В математических выражениях используется минус (например, 5 − 2). В номерах телефонов отображается цифровая чёрта (например, +7 800 000‒00‒00). И всё это не является той знакомой -, что есть на клавиатуре. - после любого символа.
- согласно правилам русского языка с автоматическим применением дефиса.
<style> .div { overflow-wrap: normal;break-word; /* не поддерживает IE, Firefox; является копией word-wrap */ word-wrap: normalbreak-word; word-break: normal;keep-all;break-all; /* не поддерживает Opera12.14, значение keep-all не поддерживается IE, Chrome */ line-break: autoloosenormalstrict; /* нет поддержки для русского языка */ -webkit-hyphens: none; -webkit-hyphens: auto; -ms-hyphens: none;-ms-hyphens: auto; hyphens: manualnoneauto; /* значение auto не поддерживается Chrome */ width: 50%; white-space: nowrap;} </style> <div class="div" lang="ru"lang="ru">уже переосвидетельствовался наш тысячадевятьсотдевяностодевяти­килограммовый корчеватель‐бульдозер‐погрузчик</div>
В чём состоит различие одно свойства от другого
По умолчанию длинные слова не переносятся, если на то нет явных указаний с помощью дефиса, и начинаются с новой строки.
Для того, чтобы игнорировались черточки, сразу видимые глазу, вносим 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;. Нажмите на и посмотрите на наш полигон.
Управлять переносом слов при hyphens: auto;
<div class="hyphens" lang="ru">Тетрагидропиранилциклопентилтетрагидропиридо<span class="nohyphens">пиридино</span>вые</div> <style> .hyphens { -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; /* пока поддерживает только Firefox */ text-align: justify; } .nohyphens { white-space: nowrap; } </style>
15 комментариев:
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
word-wrap: break-word;
Это гугловская форма комментариев вообще-то. :)