Перенос слов CSS (свойства overflow-wrap, word-wrap, word-break, hyphens)
По умолчанию длинные слова не переносятся, если на то нет явных указаний с помощью дефиса, и начинаются с новой строки.
Для того, чтобы игнорировались черточки, сразу видимые глазу, вносим 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;
Тетрагидропиранилциклопентилтетрагидропиридо пиридино вые
Тетрагидропиранилциклопентилтетрагидропиридопиридиновые.hyphens < -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; /* пока поддерживает только Firefox */ text-align: justify; >.nohyphens
Как в ворде сделать перенос слов целиком
Можно использовать возможность переноса, чтобы разделить последнее слово строки, если оно не помещается целиком. Можно установить автоматический перенос с помощью предустановленного определения переноса в сочетании с параметрами переноса, заданными пользователем. Можно установить минимальное число символов до и после переноса. Кроме того, можно установить допустимое число символов зоны переноса: области в конце строки, для которой может потребоваться выполнить перенос.
Можно вставить дополнительный перенос в слово, чтобы произвести определенное разбиение слова в конце строки. Можно также создать пользовательское определение, задающее положение дополнительных переносов в определенных словах при их наборе, вставке или импорте в приложение.
Автоматические переносы в простом тексте
1 С помощью инструмента Текст выберите текстовый фрейм или обычный текст.
Если не отображается окно настройки Свойства , выберите пункт Окно Окна настройки Свойства .
2 В окне настройки Свойства нажмите кнопку Абзац для отображения параметров настройки абзаца.
3 В области Абзац окна настройки Свойства щелкните кнопку Параметры и выберите пункт Параметры переносов .
Как сделать перенос на новую строку слова целиком?
В заголовке браузер переносит текст на новую строку, разбивая слово на части: Смотрится некрасиво. В данной ситуации вполне реально перенести на новую строку слово целиком. Оно поместиться на новой строке. Подскажите пожалуйста, как заставить браузер переносить слово целиком, не разбивая его? Я пробовал задавать разные значения стилей word-wrap и word-break, но это никак не влияет на данный перенос. Вставлять между словами
не хочется, так как в будущем может возникнуть ситуация, что перенос не понадобиться и весь текст будет влезать в одну строку.
Отслеживать
Andrey Epifantsev
задан 24 июл 2015 в 3:00
Andrey Epifantsev Andrey Epifantsev
803 4 4 серебряных знака 14 14 бронзовых знаков
Пожалуйста ставьте пример вашего кода, который показывает проблему. Без специяльного кода не бывает, что слова так разбиваются.
24 июл 2015 в 3:28
Добро пожаловать на Stack Overflow на русском! Для того, чтобы на вопрос можно было ответить, добавьте весь относящийся к проблеме код и сообщения об ошибках в сам вопрос. Как задавать вопросы, как создать краткий, завершенный и достоверный пример.
24 июл 2015 в 5:39
Возможно, этот вопрос будет помечен как [требующий правки]. После того, как вы отредактируете вопрос и добавите код, его переоткроют.
hyphens
CSS свойство hyphens указывает, как следует переносить слова через дефис, когда текст переносится на несколько строк. Оно может полностью запретить перенос, делать перенос в местах, заданных вручную или позволять браузеру автоматически расставлять переносы, где это необходимо.
Интерактивный пример
Правила расстановки переносов зависят от языка. В HTML язык определяется атрибутом lang , и браузеры применяют правила переноса только при присутствии данного атрибута и доступности соответствующего словаря для расстановки переносов. В XML необходимо использовать атрибут xml:lang (en-US) .
Примечание: Правила, определяющие, как выполняется расстановка переносов, явно не определены в спецификации, поэтому точная расстановка переносов может варьироваться от браузера к браузеру.
Синтаксис
/* Keyword values */ hyphens: none; hyphens: manual; hyphens: auto; /* Global values */ hyphens: inherit; hyphens: initial; hyphens: unset;
Свойство hyphens задаётся как одно из ключевых значений, выбранного из списка ниже.
Значения
Слова не разрываются при переносе строки, даже если внутри слов указаны точки разрыва. Строки будут переноситься только по пробелам.
Слова разрываются при переносе строки только там, где символы внутри слов указывают точки разрыва. Подробнее смотреть ниже Предлагаемые возможности разрыва строки.
Браузер может автоматически разбивать слова в соответствующих точках переноса, следуя любым правилам, которые он выбирает. Однако предлагаемые возможности разрыва строки (смотреть Предлагаемые возможности разрыва строки ниже) переопределят автоматический выбор точки разрыва, если таковые имеются.
Примечание: Поведение параметра auto зависит от того, на каком языке применяются правила переноса. Вы должны указать язык с помощью HTML атрибута lang , чтобы гарантировать, что на этом языке применяется автоматическая расстановка переносов.
Предлагаемые возможности разрыва строки
Для указания потенциальных точек разрыва строки в тексте вручную используются два символа Unicode:
«Жёсткий» дефис указывает на возможность видимого разрыва строки. Даже если строка в этом месте не переносится, дефис всё равно отображается.
Невидимый «мягкий» перенос. Этот символ не отображается визуально, вместо этого он отмечает место, где браузер должен разорвать слово, если расстановка переносов необходима. В HTML, используйте для вставки мягкого дефиса.
Формальное определение
| Начальное значение | manual |
|---|---|
| Применяется к | все элементы |
| Наследуется | да |
| Обработка значения | как указано |
| Animation type | discrete |