Css запрет переноса слов: Изучаем CSS — перенос слов

Содержание

Html запретить перенос строки — Вэб-шпаргалка для интернет предпринимателей!

Труднопереносимыми бывают не только люди, но и слова. К примеру, химическое соединение метилпропенилендигидроксициннаменилакрилическая кислота очень похожа на некоторых людей с « подвывертом »! Не знаем, как справляться с такими трудными личностями, но с переносом слов CSS точно поможет:

Зачем переносить «непереносимое»

В большинстве случаев при отображении текстового содержимого веб-страниц в браузере перенос слов не применяется. Если слово не вмещается целиком в область экрана, то по умолчанию оно полностью « переезжает » на следующую строчку.

Частичный перенос применяется лишь к длинным и сложным словам, состоящим из нескольких терминов и разделенных дефисом. Вот тут и возникают проблемы отображения этих слов на разных по диагонали экранах и в разных браузерах. При этом точно предугадать, как длинное слово будет « выглядеть » на клиентской стороне трудно, поэтому задавать переносы « вручную » бессмысленно:

Решаем проблему переноса слов с помощью HTML

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


Для этого в HTML имеется несколько вариантов:

  • Использование символа мягкого разрыва ­ — позволяет задать место разрыва сложного слова. При изменении размеров окна браузера на следующую строку переносится только часть длинного слова, стоящая после &shy , а после первой половины выводится знак переноса, похожий на дефис:

  • Использование тега — элемент появился в HTML 5 . Он также служит для указания браузеру места для разрыва сложного или длинного слова. Но в отличие от предыдущего спецсимвола этот тег не выводит в месте « разлома » знак переноса, что может негативно сказаться на читаемости всего текста:

Перенос слов средствами CSS

Перед тем, как запретить перенос слов в CSS , давайте рассмотрим несколько свойств, способных разрешить основную проблему:

  1. word-wrap – описывает, как производить перенос слов, которые по длине не помещаются в установленные размеры контейнера. Сразу стоит предупредить, что с валидацией этого свойства возникают проблемы, и с реализацией его поддержки в CSS консорциум W3C еще не определился. Поэтому специализированные валидаторы при наличии word-wrap в коде будут выдавать ошибку:


Тем не менее, это свойство «воспринимается» всеми современными браузерами и является эффективным решением проблемы переноса длинных слов. word-wrap принимает следующие значения:

  • normal – слова не переносятся;
  • break-word – автоматический перенос слов;
  • inherit – наследование значения родителя.

Пример, иллюстрирующий применение этого свойства:


В новой спецификации CSS свойство word-wrap было переименовано в overflow-wrap . Оба свойства принимают одинаковые значения. Но поддержка overflow-wrap пока реализована слабо, поэтому лучше использовать старую версию свойства:


Как видно на расположенном выше скриншоте, новое свойство поддерживается Google Chrome , но не поддерживается в IE . Поэтому overflow-wrap лучше не использовать для переноса слов в CSS .

  1. word-break – устанавливает правила переноса строк внутри контейнера, если они не помещаются в него по ширине. Это новое свойство, и его поддержка была реализована в CSS3 . Оно является валидным, но предназначено для работы со строками, поэтому перенос слов может производиться грамматически неправильно.

Свойство принимает три значения:

  • normal – используются правила переноса, установленные по умолчанию;
  • word-break – перенос строк осуществляется автоматически, чтобы слово поместилось в установленные по ширине размеры контейнера;
  • keep-all – отключает автоматический перенос слов в китайском, японском и корейском. Для остальных языков действие значения аналогично normal.

  1. hyphens – новое свойство, которое появилось с выходом CSS3 . Оно устанавливает, как браузер будет осуществлять перенос слов в выводимом тексте. Свойство принимает несколько значений:
  • none – отключает перенос слов в CSS ;
  • manual ( значение по умолчанию ) – слова переносятся в тех участках текстового блока, где это задано с помощью тега или мягкого переноса (­) ;
  • auto – браузер автоматически переносит слова на основе своих настроек.

должен присутствовать атрибут lang со значением «ru» (lang=»ru»).

Свойство поддерживается последними версиями IE , Opera и Firefox . Для каждого из них прописывается своя строчка CSS . Hyphens не поддерживается Google Chrome . Пример:

Запрет переноса слов

Иногда нужно сделать так, чтобы строка отображалась полностью без разрыва. Запрет переноса слов в css можно реализовать несколькими способами:

  • С помощью неразрывного пробела &nbsp , который устанавливается в местах переноса строки или слов;
  • Задав свойству white-space значение « nowrap » ( white-space: nowrap ).


Теперь вы сможете переносить с помощью CSS даже самые длинные слова. Но вот с проблемой труднопереносимых людей вам придется разбираться самостоятельно. Попробуйте воздействовать на них методами CSS – может и получиться, хотя мы сами не проверяли.

Как сделать или запретить перенос строки: HTML код и тег

HTML-оформление постов и страниц очень важное дело — оно помогает оформлять контент таким способом, чтобы пользователю было удобно его читать.

Я расскажу вам о теге br — он делает перенос строки в HTML, то есть разбивает строку на две части — причем делает это принудительно, заканчивая текущую строку в том месте, где был вставлен и перенося ее вторую часть на новый ряд.

Где используется этот тег, когда конкретно возникает неотложна необходимость вставить в текст перевод строки без создания нового абзаца? Например, это может пригодиться в оформлении контента — если у вас есть сайт со стихами и отрывками стихов, текстами песен или чем-то подобным.

Все о теге для переноса строки br

Тег br осуществляет одинарный перенос строки в HTML (что это такое описано тут) и определяется всеми браузерами. Да, чуть не забыл — если вы используете тег br, то в отличие от тега абзаца p, у вас не добавляется пустой отступ (перед строкой).

Тег br является пустым (пустой значит без содержимого, ничего не содержит), а значит его не нужно закрывать. А так как его не нужно закрывать, было придумано краткое описание — оно изначально подразумевает то, что сам тег не имеет закрывающего тега.

Представьте на минуту, что не было бы краткого описания. Что тогда? Тогда пришлось бы каждый раз «закрывать и открывать» перенос строки примерно так:
. Это как минимум неудобно. Но, тем не менее, в строгом XHTML закрывать его обязательно тегом
.

Если стоит задача увеличить расстояние по вертикали — между теми строками, где вы вставляете перенос — сделайте двойной перенос, вставив тег
дважды подряд.

Чтобы осуществить перенос следующего предложения на новую строку, используем тег br.

Ура, второе предложение на новой строке.

Чтобы осуществить перенос следующего предложения на новую строку, используем тег br.

Ура, второе предложение на новой строке.

Ночь, улица, фонарь, аптека,

Бессмысленный и тусклый свет.

Живи еще хоть четверть века —

Все будет так. Исхода нет.

Умрешь — начнешь опять сначала

И повторится все, как встарь:

Ночь, ледяная рябь канала,

Аптека, улица, фонарь.

Ночь, улица, фонарь, аптека,
Бессмысленный и тусклый свет.
Живи еще хоть четверть века —

Все будет так. Исхода нет.

Умрешь — начнешь опять сначала
И повторится все, как встарь:
Ночь, ледяная рябь канала,
Аптека, улица, фонарь.

Зачем придумали тег br?

Необходимость этого тега существует хотя бы потому что перенести строку «как в Ворде» (как делают неопытные пользователи), путем написания десятков пробелов подряд, — не выйдет.

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

Читайте также: Как сделать пробел в HTML: https://blogwork.ru/probel-v-html/.

Но не стоит злоупотреблять тегом

, чтобы все больше и больше увеличивать расстояние между строками — для этого лучше всего воспользоваться базовыми инструментами HTML+CSS. Недопустимо создание новых абзацев или «как бы абзацев» (это считается плохим подходом) — только перенос строки!

Чтобы создавать и размечать абзацы вам следует пользоваться тегом p, а чтобы увеличить имеющееся расстояние между абзацами — измените каскадные таблицы стилей, например добавьте:

Бонус — br clear

А как сделать так чтобы текст, в котором вы поставили перенос строки, не обтекал плавающий элемент (это либо изображение с установленным align, либо элемент со свойством float), а начинался ниже элемента? Для этого можно использовать атрибут clear.

Допустим, у нас есть изображение выровненное по левому краю (align=»left»). Если мы установим
или
, то текст после тега
(следующая строка, которую мы и переносим) будет отображаться как надо, ниже рисунка. Другие значения атрибута clear тега
сделают так, чтобы текст обтекал рисунок, расположившись справа от него.

Использование этого специфичного атрибута не приветствуется спецификацией HTML — такой код будет невалидным.

Кстати, рекомендуем прочесть: Как вставить изображение в HTML.

БОНУС — тег-разделитель hr

Тег тоже одиночный, но, в отличие от
, он используется для создания горизонтального разделителя в виде линии. Более того, внешний вид этой линии мы можем задавать при помощи атрибутов. Но, конечно же, лучше это делать проверенными методами через CSS (что это такое, читайте здесь).

БОНУС — запрет переноса на новую строку с тегом nobr

Бывает и так, что мы хотим запретит перенос строки и избежать перевода на новую строку текста: либо между двумя конкретными словами, либо в целом абзаце. Что делать? Использовать тег . Как выглядит на практике? Вот так:

Что делает тег ? Он говорит браузеру — отображай текст внутри тега без переносов, одной строкой. И, если текст длинный, тогда у нас появится некрасивая и длинная горизонтальная полоса прокрутки, а пользователи должны будут прокрутить текст по горизонтали, чтобы прочитать его полностью.

Как мы понимаем, это очень неудобно. Но тег есть!

Итоги — использование br, nobr, hr, p в HTML

Подводя итог, резюмирую содержание статьи:

— для того чтобы разделять абзацы

  • тег
    — для того чтобы перенести строку внутри абзаца (недопустимо «создание абзацев» при помощи этого тега или злоупотребление им)
  • тег — для создания горизонтальной линии-разделителя
  • тег — для запрета переноса строк в HTML
  • Как запретить перенос текста? | WebReference

    HTML самостоятельно переносит текст на другую строку, если текст целиком не помещается в одну строку. В некоторых случаях, наоборот, требуется запретить перенос слов, к примеру, в пунктах меню или в коде программы, чтобы не «ломать» вёрстку. Для этого используется стилевое свойство white-space со значением nowrap, оно добавляется к нужному элементу с текстом.

    В примере 1 white-space применяется к ссылкам, чтобы текст ссылки не «разбивался» и не переносился на другую строку.

    Пример 1. Использование white-space

    Результат данного примера показан на рис. 1.

    Рис. 1. Меню с запретом переноса текста

    Автор и редакторы

    Автор: Влад Мержевич

    Последнее изменение: 14.11.2018

    Редакторы: Влад Мержевич

    white-space | htmlbook.ru

    Internet Explorer Chrome Opera Safari Firefox Android iOS
    6.0+ 8.0+ 1.0+ 4.0+ 9.5+ 1.0+ 3.0+ 1.0+ 3.5+ 1.0+ 1.0+
    Краткая информация
    Версии CSS
    CSS 1 CSS 2 CSS 2. 1 CSS 3
    Описание

    Свойство white-space устанавливает, как отображать
    пробелы между словами. В обычных условиях любое количество пробелов в коде HTML
    показывается на веб-странице как один. Исключением является тег

    Результат данного примера показан на рис. 1.

    Рис. 1. Применение свойства white-space

    Объектная модель
    Браузеры

    Браузер Internet Explorer до версии 7.0 включительно не поддерживает значения pre-line, pre-wrap и inherit. Для

    значения normal и pre ведут себя как pre-wrap, а значение nowrap ведет себя как pre-line.

    Opera до версии 9.5 не поддерживает значение pre-line. Для

    значения normal и pre ведут себя как pre-wrap, а значение nowrap ведет себя как pre-line.

    Safari до версии 3.0 и iOS не поддерживают значения pre-wrap и pre-line.

    Firefox до версии 2.0 включительно не поддерживает значения pre-line и pre-wrap. Для

    значения normal, nowrap, и pre воспринимаются как pre-wrap.

    html — Запретить переносы строк

    Stack Overflow на русском

    Начните с этой страницы, чтобы быстро ознакомиться с сайтом

    Подробные ответы на любые возможные вопросы

    Обсудить принципы работы и политику сайта

    Узнать больше о компании Stack Overflow

    Узнать больше о поиске разработчиков или рекламе на сайте

    текущее сообщество

    Как запретить перенос слов CSS?

    Приветствую вас, дорогие друзья!

    Сегодня я предлагаю вам разобраться, как можно запретить перенос слов CSS-свойствами.

    Дело в том, что по умолчанию в HTML для текста в блоках переносы для слов не заданы, и при уменьшении размеров блока, слова переносятся на новую строку. Но в случае создания сайта на базе CMS, например, WordPress, вы можете столкнуться с тем, что, при адаптации сайта для мобильных устройств, слова будут переноситься посимвольно.

    Делается это, в первую очередь для экономии места, и наилучшего заполнения текстом блока. Но далеко не всегда это удобно и красиво.

    Давайте рассмотрим свойство, которое позволит вам запретить перенос слов CSS при возникновении такой необходимости.

    В случае если у вас при изменении размера блока происходит перестроения текста с переносом отдельных символов на следующую строку, то, скорее всего, в активной теме вашего сайта для всех div применяется CSS-свойство word-break со значением break-all:

    Перенос слов по символьно на новую строку

    Данное свойство задает автоматическую расстановку переносов для наилучшего заполнения блока.

    Если вам нужно его отключить, то в CSS-файле активной темы, для блока, в котором расположен текст, вам нужно задать это же свойство, но со значением normal:

    Запрет переноса слов CSS-свойствами

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

    Вероятно, что у стилей, заданных по умолчанию для темы вашего сайта будет больший приоритет, чем для стилей, которые добавляете вы. Из-за чего они не будут срабатывать. В этом случае вам будет полезно ознакомиться с рекомендациями в этой статье: «Почему не работают CSS-стили?»

    Для правильного определения селектора блока, для которого вы собираетесь добавить стили, вы можете воспользоваться рекомендациями из этой статьи: «Как определить ID и класс элемента на странице?»

    Для более безопасного и удобного добавления стилей для вашего сайта, рекомендую использовать программу NotePad++. Инструкцию по ее настройке и использованию вы сможете найти по этой ссылке: «Редактирование файлов сайта в Notepad++»

    Сегодня у меня все. Надеюсь, показанный в данной статье прием работы поможет вам при создании вашего сайта и адаптации его под мобильные устройства, и у вас не возникнет проблем при необходимости запретить перенос слов CSS.

    Если вам понравилась данная статья, обязательно, оставьте свой комментарий и поделитесь ею в социальных сетях.

    До встречи в следующих статьях!

    С уважением Юлия Гусарь

    Как сделать перенос строки в тексте в HTML?

    Сегодня мы с вами немного коснемся темы оформления текстов на вашем сайте. Создавая сайт и ведя уже существующий, нужно грамотно подходить к каждой его мелочи. Я – активный пользователь Интернета, очень часто ищу различную информацию абсолютно по разным темам. Зачастую встречаю сайты, на которых информация представлена примерно в таком виде:

    Не говоря уже о том, что здесь нет никаких выделений (главного в тексте), так и отсутствуют какие-либо параграфы, или попросту – переносы строк. Текст может быть и корректным с точки зрения орфографии и его темы, но визуально – он некомфортен для восприятия. Согласитесь, такой вид куда более читабельный и не «отпугивает» наших пользователей:

    Неважно, коммерческий ваш сайт или это обычный блог – всем этим нюансам должно быть уделено отдельное внимание. Именно поэтому сегодня я покажу вам целых три варианта переноса строк в вашем тексте.

    Для наглядности за основу мы возьмем популярный в кругах дизайнеров и верстальщиков текст «Lorem Ipsum», а если быть точнее – то несколько его параграфов:

    и рассмотрим популярные способы переноса строк в HTML.

    Первый вариант переноса строк в HTML

    Первый и, наверное, самый популярный и в то же время специально созданный тег для переноса строк – это:

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

    Использовать его вы можете сколько угодно раз. Одно использование – один перенос строки, соответственно, два этих тега, поставленные подряд, дают двойной перенос.

    Второй вариант переноса строк в HTML

    В HTML существует такое понятие, как параграфы. Для них отведен специальный тег типа:

    Весь текст, заключенный в него, переносится на новую строку. По умолчанию (если нет глобальных стилей) он имеет свой отступ. Использование следующее:

    Здесь стоит отметить то, что использование пустого тега типа:

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

    Или же присвойте параграфу свой идентификатор, за счет которого примените свой персональный стиль:

    Этот вариант оформления текстов я люблю больше всего, так как можно настроить желаемое расстояние между параграфами. Тег из первого же варианта я использую редко.

    Третий вариант переноса строк в HTML

    Этот вариант похож на вид параграфов, только вместо тега «p» используется тег «div»:

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

    или же через отдельный идентификатор блока:

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

    Перенос слов CSS (свойства overflow-wrap, word-wrap, word-break, hyphens) — Примеры

    Указанные ниже свойства CSS определяют как переносить длинные слова:

    1. только там, где стоит чёрточка, пробел или Enter (искл., неразрывный пробел и неразрывный дефис ‑ ). Между частями одного слова пишется дефис (например, красно‐жёлтый), между словами — тире. «Мягкий дефис» ­ проявляется только при необходимости переноса. Если слово выходит за рамки родителя, то или ​ переносит его часть без чёрточки. В математических выражениях используется минус (например, 5 − 2). В номерах телефонов отображается цифровая чёрта (например, +7 800 000‒00‒00). И всё это не является той знакомой -, что есть на клавиатуре.
    2. после любого символа.
    3. согласно правилам русского языка с автоматическим применением дефиса.
    В чём состоит различие одно свойства от другого

    По умолчанию длинные слова не переносятся, если на то нет явных указаний с помощью дефиса, и начинаются с новой строки.

    Для того, чтобы игнорировались черточки, сразу видимые глазу, вносим 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; и посмотрите на наш полигон.

    Internet Explorer Chrome Opera Safari Firefox Android iOS
    6.0+ 8.0+ 1.0+ 4.0+ 9.5+ 1.0+ 3.0+ 1.0+ 3.5+ 1.0+ 1.0+

    Краткая информация

    Значение по умолчанию normal
    Наследуется Да
    Применяется К блочным элементам
    Ссылка на спецификацию http://www.w3.org/TR/CSS21/text.html#propdef-white-space

    Версии CSS

    CSS 1 CSS 2 CSS 2. 1 CSS 3

    Описание

    Свойство white-space устанавливает, как отображать пробелы между словами. В обычных условиях любое количество пробелов в коде HTML показывается на веб-странице как один. Исключением является тег

    Результат данного примера показан на рис. 1.

    Рис. 1. Применение свойства white-space

    Объектная модель

    [window.]document.getElementBy >elementID «).style.whiteSpace

    Браузеры

    Браузер Internet Explorer до версии 7.0 включительно не поддерживает значения pre-line , pre-wrap и inherit . Для

    значения normal и pre ведут себя как pre-wrap , а значение nowrap ведет себя как pre-line .

    Opera до версии 9.5 не поддерживает значение pre-line . Для

    значения normal и pre ведут себя как pre-wrap , а значение nowrap ведет себя как pre-line .

    Safari до версии 3.0 и iOS не поддерживают значения pre-wrap и pre-line .

    Firefox до версии 2.0 включительно не поддерживает значения pre-line и pre-wrap . Для

    значения normal , nowrap , и pre воспринимаются как pre-wrap .

    Рекомендуем к прочтению

    Как отключить перенос слов в HTML?



    Я чувствую себя глупо из-за того, что не могу понять этого, но как мне отключить wordwrap? свойство css word-wrap может быть принудительно включено с помощью break-word, но не может быть принудительно отключено (только может быть оставлено наедине со значением normal ).

    Как мне заставить слово обернуться ?

    html css word-wrap
    Поделиться Источник Alexander Bird     10 января 2011 в 23:19

    4 ответа


    • Emacs-отключить перенос слов в html-режиме

      В моем emacs html-режиме перенос слов происходит, если пересечь легендарный предел в 80 столбцов. Как я могу его отключить?

    • Отключить перенос слов в JTextPane

      Я не могу найти простой способ отключить перенос слов в JTextPane. Я не могу использовать JTextArea, потому что мне нужны разные цвета для разных текстов. У меня есть эти большие уродливые линии, которые становятся еще уродливее с включенным переносом слов. У JTextArea есть метод setLineWrap(), но…



    893

    Вам нужно использовать атрибут CSS white-space.

    В частности, white-space: nowrap и white-space: pre являются наиболее часто используемыми значениями. Первый, кажется, то, что вам нужно.

    Поделиться Jon     10 января 2011 в 23:21



    27

    Добавлено webkit конкретных значений, отсутствующих выше

    white-space: -moz-pre-wrap; /* Firefox */
    white-space: -o-pre-wrap; /* Opera */
    white-space: pre-wrap; /* Chrome */
    word-wrap: break-word; /* IE */
    

    Поделиться Matas Vaitkevicius     07 июля 2015 в 15:07



    7

    Интересно, почему вы находите в качестве решения «white-space» с «nowrap» или «pre», это не делает правильного поведения: вы заставляете свой текст в одной строке! Текст должен прерывать строки, но не прерывать слова по умолчанию. Это вызвано некоторыми атрибутами css: перенос слов, перенос переполнения, разрыв слов и дефисы. Так что вы можете иметь либо:

    word-break: break-all;
    word-wrap: break-word;
    overflow-wrap: break-word;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
    

    Поэтому решение состоит в том, чтобы удалить их или переопределить их с помощью «unset» или «normal»:

    word-break: unset;
    word-wrap: unset;
    overflow-wrap: unset;
    -webkit-hyphens: unset;
    -moz-hyphens: unset;
    -ms-hyphens: unset;
    hyphens: unset;
    

    UPDATE: я также предоставляю доказательство с JSfiddle: https://jsfiddle.net/azozp8rr/

    Поделиться zod     12 мая 2018 в 09:55


    • Как отключить перенос слов в iTerm2?

      Как отключить перенос слов в iTerm2? Есть ли конкретная команда для этого или в настройках? Я пытаюсь избежать того, чтобы текст перешел на следующую строку. Я бы предпочел прокручивать из стороны в сторону.

    • Как отключить перенос слов NSTextView?

      NSTextView по умолчанию выполняет перенос слов. Как я могу отключить это? Я делаю просмотрщик кода JSON, поэтому мне нужно отключить его.



    3

    Это сработало для меня, чтобы остановить глупые перерывы в работе в текстовых областях Chrome

    word-break: keep-all;
    

    Поделиться Ryan Charmley     02 октября 2019 в 21:54


    Похожие вопросы:


    Как отключить перенос слов в Android Multiline TextView?

    Возможный Дубликат : Отключить перенос слов в многострочном Android TextView У меня есть вопрос о Android TextView. Можно ли отключить перенос слов в многострочном TextView? Я хочу использовать…


    Отключить перенос слов в firebug

    Когда я разворачиваю слишком много узлов, а положение узла находится слишком близко к правой боковой панели, поэтому ему не хватает места, вместо того чтобы полоса прокрутки стала меньше (чтобы я. ..


    UITextView перенос символов, но не перенос слов

    У меня есть UITextView, на котором я хотел бы отключить перенос слов, но оставить перенос символов включенным. В принципе, я хотел бы иметь длинную строку 200+ символов, которая все еще обертывается…


    Emacs-отключить перенос слов в html-режиме

    В моем emacs html-режиме перенос слов происходит, если пересечь легендарный предел в 80 столбцов. Как я могу его отключить?


    Отключить перенос слов в JTextPane

    Я не могу найти простой способ отключить перенос слов в JTextPane. Я не могу использовать JTextArea, потому что мне нужны разные цвета для разных текстов. У меня есть эти большие уродливые линии,…


    Как отключить перенос слов в iTerm2?

    Как отключить перенос слов в iTerm2? Есть ли конкретная команда для этого или в настройках? Я пытаюсь избежать того, чтобы текст перешел на следующую строку. Я бы предпочел прокручивать из стороны в. ..


    Как отключить перенос слов NSTextView?

    NSTextView по умолчанию выполняет перенос слов. Как я могу отключить это? Я делаю просмотрщик кода JSON, поэтому мне нужно отключить его.


    Как отключить перенос слов в JEditorPane?

    Мой JEditorPane автоматически обертывает слова; я не хочу этого. Все, что я хочу, — это чтобы появилась горизонтальная полоса, которая позволяет пользователю писать столько, сколько он хочет. Как я…


    Как отключить перенос слов в Редакторе Xcode 4?

    Я не могу найти, Как отключить перенос слов в Редакторе Xcode 4. Как я могу это сделать?


    Отключить перенос слов в VS-коде

    У меня есть следующие настройки в коде VS, чтобы отключить перенос слов editor.wordWrap: off, editor.wordWrapColumn: -1 Перенос слов по-прежнему не выключен. Это делает VS Code действительно…

    Какой атрибут определяет перенос слов. Перенос длинных слов с помощью CSS. Включаем перенос для слов, которые не влезают

    Влад Мержевич

    В отличие от текста в полиграфии, на веб-странице редко применяются переносы, поскольку мы не привязаны жёстко к формату бумаги. Сайты могут смотреть на разных мониторах, с разным разрешением, в разных операционных системах и браузерах. Всё это порождает такое сочетание комбинаций, что предугадать, как будет выглядеть конечный текст для пользователя невозможно. Из-за этого обычно текст выравнивается по левому краю, а переносы происходят словами целиком. Но всё же переносы слов в некоторых случаях нужны, например, когда применяются длинные химические или медицинские термины, в узких колонках заданной ширины, ради эстетики. В HTML и CSS ручных или автоматических способов добавления переносов не так уж и много, так что перечислю все.

    Использование тега

    Тег введён в HTML5 и создаёт перенос слов при необходимости. В тех местах, где по правилам русского языка допустим перенос, вставляем (пример 1). Если слово целиком помещается в отведённую ширину, этот тег никак себя не проявит и о его наличии мы даже не узнаем. Если слово не помещается, браузер в месте нахождения тега создаёт перенос.

    Пример 1. Тег

    Переносы

    Одиннадцатиклассница Анжелика после окончания школы выбрала профессию делопроизводительницы.

    Результат данного примера показан на рис. 1.

    Рис. 1. Текст с переносами слов

    Мягкий перенос

    Применение имеет серьёзный недостаток — понять, перенос перед нами или отдельное слово на другой строке, нельзя. Из-за этого может потеряться смысл предложения и его неправильно поймут. Переносы надо делать по правилам типографики, а именно: в конце строки добавлять дефис. С этим отлично справляется мягкий перенос, в коде HTML для него имеется спецсимвол — . Он выполняет ту же роль, что и тег — не виден в обычном тексте и переносит слово на другую строку, при этом добавляя дефис (пример 2).

    Пример 2. Мягкий перенос

    Переносы

    Один-надцатиклас-сница Анжелика после окончания школы выбрала профессию дело-произ-водитель-ницы.

    Результат данного примера показан на рис. 2. Заметьте, насколько эстетичнее и понятнее стал выглядеть текст в сравнении с рис. 1.

    Рис. 2. Текст с переносами слов

    Свойство word-break

    Чтобы автоматизировать процесс создания переносов воспользуйтесь свойством word-break со значением break-all (пример 3). Добавлять какие-либо символы или теги в HTML уже не придётся, всё берут на себя стили.

    Пример 3. Применение word-break

    Переносы

    Одиннадцатиклассница Анжелика после окончания школы выбрала профессию делопроизводительницы.

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

    Рис. 3. Текст с переносами слов

    Из всех перечисленных способов «полуручной» с использованием — даёт наилучший результат — соблюдаются правила русского языка, текст выглядит наиболее эстетично. Пользуйтесь им, когда в тексте встречаются длинные слова.

    Свойство hyphens

    И, наконец, самое мощное и удобное свойство для автоматического добавления переносов — hyphens . Его действие основано на встроенном в браузере словаре переносов, поэтому даёт наилучший результат. Поддерживается в IE10, Firefox, Android и iOS. Chrome и Opera не поддерживают. Чтобы это всё работало, для тега добавляем атрибут lang со значением ru (пример 4).

    Пример 4. Использование hyphens

    Переносы

    Одиннадцатиклассница Анжелика после окончания школы выбрала профессию делопроизводительницы.

    Результат данного примера показан на рис. 4.

    Рис. 4. Текст с переносами слов

    Запрет переносов

    Нередко возникает и обратная задача — запретить переносы в тех местах, где они по правилам языка недопустимы. Например, нельзя отрывать единицы измерения от числа (10 мл), обозначение года (54 до н. э.), инициалы от фамилии, разрывать устойчивые сокращения (т. д.) и др. Чтобы браузер не добавлял переносы в месте пробела, его следует заменить на неразрывный пробел (пример 5).

    Пример 5. Использование

    Переносы

    Озеро по координатам 70° 58′ 19″ с. ш. 97° 24′ 5″ в. д. расположено в Таймырском Долгано-Ненецком районе Красноярского края России.

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

    Всем привет). Я продолжаю писать о различных полезных свойствах языка css, которые так или иначе могут помочь при верстке. И сегодня я хочу рассказать, как делать в css перенос слов, если они не влазят в свой контейнер. Я покажу вам все на реальном примере.

    Включаем перенос для слов, которые не влезают

    Допустим, у меня есть блок, шириной 100 пикселей и мне в него нужно написать какой-то текст. В тексте попадается слово «самораспаковывающийся «. Таким бывает архив, например) Но не суть. Слово очень длинное, оно просто не влезет в контейнер по ширине. Давайте его напишем в такой узкий блок (100 пикселей). Что будет?

    Как видим, бедное слово вылезло за пределы контейнера, ну деваться ему некуда, что поделаешь. И это без отступов. Так вот, тут на помощь приходит свойство word-wrap. Вот что нужно задать блоку, чтобы включить перенос слов по буквам в нем:

    Word-wrap: break-word;

    А для убедительности можно прописать еще и внутренние отступы (padding). Итак, после применения свойства видим, что слишком длинные слова будут переноситься по буквам на другую строку. Причем, даже если второй строки не хватит для слова, то остальная его часть перенесется на третью и т.д.

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

    В каких случаях использовать word-wrap

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

    Итак, в этой статье мы узнали, как делать перенос слов в css. На этом у меня сегодня все. До встречи.

    Определяют как переносить длинные слова:

    1. только там, где стоит чёрточка, пробел или Enter (искл., неразрывный пробел и неразрывный дефис ‑). Между частями одного слова пишется дефис (например, красно‐жёлтый), между словами — тире. «Мягкий дефис» — проявляется только при необходимости переноса. Если слово выходит за рамки родителя, то или ​ переносит его часть без чёрточки. В математических выражениях используется минус (например, 5 − 2). В номерах телефонов отображается цифровая чёрта (например, +7 800 000‒00‒00). И всё это не является той знакомой -, что есть на клавиатуре.
    2. после любого символа.
    3. согласно правилам русского языка с автоматическим применением дефиса.

    overflow-wrap
    word-wrap
    word-break
    line-break
    hyphens

    уже переосвидетельствовался наш тысячадевятьсотдевяностодевяти-килограммовый корчеватель‐бульдозер‐погрузчик

    lang=»ru» lang=»ru» >уже переосвидетельствовался наш тысячадевятьсотдевяностодевятикилограммовый корчеватель‐бульдозер‐погрузчик

    В чём состоит различие одно свойства от другого

    По умолчанию длинные слова не переносятся, если на то нет явных указаний с помощью дефиса, и начинаются с новой строки.

    Для того, чтобы игнорировались черточки, сразу видимые глазу, вносим 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» .

    Не переносить слова на другую строку

    Скажем, пункт меню или кнопка будут нехорошо выглядеть, если разъедутся на части. Поэтому надо запретить их разделение. Для чего все вышеуказанные свойства следует поставить в режим «по умолчанию» и добавить . Нажмите на и посмотрите на наш полигон.

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

    Тетрагидропиранилциклопентилтетрагидропиридопиридино вые

    Тетрагидропиранилциклопентилтетрагидропиридопиридиновые

    Свойство white-space устанавливает, как отображать пробелы между словами. В обычных условиях любое количество пробелов в коде HTML показывается на веб-странице как один. Исключением является элемент

     , помещённый в этот контейнер текст выводится со всеми пробелами, как он был отформатирован пользователем. Таким образом, white-space
     имитирует работу 
    Но в отличие от него не меняет шрифт на моноширинный. 

    Краткая информация

    Обозначения

    Описание Пример
    Указывает тип значения.
    A && B Значения должны выводиться в указанном порядке. &&
    A | B Указывает, что надо выбрать только одно значение из предложенных (A или B). normal | small-caps
    A || B Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. width || count
    Группирует значения. [ crop || cross ]
    * Повторять ноль или больше раз. [,]*
    + Повторять один или больше раз. +
    ? Указанный тип, слово или группа не является обязательным. inset?
    {A, B} Повторять не менее A, но не более B раз. {1,4}
    # Повторять один или больше раз через запятую. #
    ×

    Значения

    normal Текст в окне браузера выводится как обычно, переносы строк устанавливаются автоматически. nowrap Пробелы не учитываются, переносы строк в коде HTML игнорируются, весь текст отображается одной строкой; вместе с тем, добавление
    переносит текст на новую строку. pre Текст показывается с учётом всех пробелов и переносов, как они были добавлены разработчиком в коде HTML. Если строка получается слишком длинной и не помещается в окне браузера, то будет добавлена горизонтальная полоса прокрутки. pre-line В тексте пробелы не учитываются, текст автоматически переносится на следующую строку, если он не помещается в заданную область. pre-wrap В тексте сохраняются все пробелы и переносы, однако если строка по ширине не помещается в заданную область, то текст автоматически будет перенесён на следующую строку.

    Действие значений на текст представлено в табл. 1.

    Пример

    white-space

    Пример

    Великая теорема Ферма
    X n + Y n = Z n
    где n — целое число > 2

    Результат данного примера показан на рис. 1.

    Рис. 1. Применение свойства white-space

    Объектная модель

    Объект .style.whiteSpace

    Примечание

    Браузер Internet Explorer до версии 7.0 включительно не поддерживает значения pre-line и pre-wrap . Для значения normal и pre ведут себя как pre-wrap , а значение nowrap ведёт себя как pre-line .

    Opera до версии 9.5 не поддерживает значение pre-line . Для значения normal и pre ведут себя как pre-wrap , а значение nowrap ведет себя как pre-line .

    В Firefox для значения normal , nowrap , и pre воспринимаются как pre-wrap .

    Спецификация

    Каждая спецификация проходит несколько стадий одобрения.

    • Recommendation (Рекомендация ) — спецификация одобрена W3C и рекомендована как стандарт.
    • Candidate Recommendation (Возможная рекомендация ) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
    • Proposed Recommendation (Предлагаемая рекомендация ) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
    • Working Draft (Рабочий проект ) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
    • Editor»s draft (Редакторский черновик ) — черновая версия стандарта после внесения правок редакторами проекта.
    • Draft (Черновик спецификации ) — первая черновая версия стандарта.
    ×

    Краткая информация

    Версии CSS

    CSS 1 CSS 2 CSS 2.1 CSS 3

    Описание

    Свойство white-space устанавливает, как отображать пробелы между словами. В обычных условиях любое количество пробелов в коде HTML показывается на веб-странице как один. Исключением является тег

    Помещенный в этот контейнер текст выводится со всеми пробелами, как он был отформатирован
     пользователем. Таким образом, white-space
     имитирует
     работу тега 
    Но в отличие от него не меняет шрифт
     на моноширинный.
     

    Синтаксис

    white-space: normal | nowrap | pre | pre-line | pre-wrap | inherit

    Значения

    normal Текст в окне браузера выводится как обычно, переносы строк устанавливаются автоматически. nowrap Пробелы не учитываются, переносы строк в коде HTML игнорируются, весь текст отображается одной строкой; вместе с тем, добавление тега
    переносит текст на новую строку. pre Текст показывается с учетом всех пробелов и переносов, как они были добавлены разработчиком в коде HTML. Если строка получается слишком длинной и не помещается в окне браузера, то будет добавлена горизонтальная полоса прокрутки. pre-line В тексте пробелы не учитываются, текст автоматически переносится на следующую строку, если он не помещается в заданную область. pre-wrap В тексте сохраняются все пробелы и переносы, однако если строка по ширине не помещается в заданную область, то текст автоматически будет перенесен на следующую строку. inherit Наследует значение родителя.

    Действие значений на текст представлено в табл. 1.

    HTML5 CSS2.1 IE Cr Op Sa Fx

    white-space

    Пример

    Великая теорема Ферма
    X n + Y n = Z n
    где n - целое число > 2

    Результат данного примера показан на рис. 1.

    Рис. 1. Применение свойства white-space

    Объектная модель

    document.getElementById("elementID ").style.whiteSpace

    Браузеры

    Браузер Internet Explorer до версии 7.0 включительно не поддерживает значения pre-line , pre-wrap и inherit . Для

    Opera до версии 9.5 не поддерживает значение pre-line . Для значения normal и pre ведут себя как pre-wrap , а значение nowrap ведет себя как pre-line .

    Safari до версии 3.0 и iOS не поддерживают значения pre-wrap и pre-line .

    Firefox до версии 2.0 включительно не поддерживает значения pre-line и pre-wrap . Для значения normal , nowrap , и pre воспринимаются как pre-wrap .

    Всё, что нужно знать об автоматических переносах в CSS / Хабр

    Недавно меня пригласили выступить с вечерней лекцией в Типографском обществе Австрии. Для меня стало большой честью последовать по стопам таких светил, как Мэтью Картер, Вим Краувел, Маргарет Калверт, Эрик Шпикерман и покойная Фреда Сэк.

    Я рассказал о некоторых золотых правилах типографики в интернете, а потом во время секции QA меня спросили о текущей ситуации с автоматическими переносами в вебе. Это хороший вопрос, особенно с учётом того, что немецкий язык знаменит часто используемыми длинными существительными (например, Verbesserungsvorschlag означает «предложение для улучшения»), поэтому переносы широко используются в большинстве письменных носителей.

    В вебе автоматические переносы появились в 2011 году и теперь широко поддерживаются. Safari, Firefox и Internet Explorer 9 поддерживают их на всех платформах, а Chrome — на Android и MacOS (пока нет на Windows или Linux).

    Автоматические переносы запускаются в два шага. Первый — установить язык для текста. Это сообщит браузеру, какой использовать

    словарь

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

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

    1. Установка языка

    Язык веб-страницы устанавливается с помощью атрибута HTML

    lang

    :

    <html lang="en">

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

    Атрибут lang="en" применяет языковой тег ISO, сообщая браузеру, что текст на английском языке. В этом случае браузер выберет дефолтный английский словарь переносов, что обычно соответствует переносам и в американском английском. Хотя американский и британский английский заметно отличаются в орфографии и произношении (и, следовательно, переносах), но разница не такая существенная, как между вариантами португальского. Проблема решается добавлением «региона», чтобы браузер знал, какой вариант английского наиболее подходит в качестве словаря переносов. Например, чтобы указать бразильский португальский или британский английский:

    <html lang="pt-BR">
    <html lang="en-GB">

    2. Включение переносов

    После установки языка можно включить автоматические переносы в CSS. Это исключительно просто:

    hyphens: auto;

    В настоящее время Safari и IE/Edge требуют префиксов, поэтому прямо сейчас следует написать так:

    -ms-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;

    Но недостаточно просто включить функцию в CSS. В спецификациях

    CSS Text Module Level 4

    появилась возможность управлять переносами, как в программах для вёрстки (например, InDesign) и некоторых текстовых редакторах (включая Word). Эти элементы управления позволяют разными способами установить количество переносов в тексте.

    Ограничение длины слова и количества символов до и после переноса

    Если переносить короткие слова, их труднее читать. Точно так же вы не хотите отрывать от слова маленький кусочек. Общепринятое эмпирическое правило состоит в том, чтобы переносить только слова длиной не менее шести букв, оставляя не менее трёх символов до переноса и не менее двух на следующей строке.

    В Оксфордском руководстве по стилю рекомендуется минимум три буквы после переноса, хотя допустимы редкие исключения.

    Эти ограничения задаются с помощью свойства

    hyphenate-limit-chars

    . Оно принимает три значения, разделённые пробелами. Это минимальное ограничение символов для всего слова, минимальное количество символов до и после переноса. Чтобы соответствовать вышеупомянуторму эмпирическому правилу, указываем 6, 3 и 2, соответственно:

    hyphenate-limit-chars: 6 3 2;


    hyphenate-limit-chars в действии

    По умолчанию для всех трёх параметров установлено значение auto. Это означает, что браузер выберет лучшие настройки на основе текущего языка и макета. CSS Text Module Level 4 предполагает использование в качестве отправной точки 5 2 2 (на мой взгляд, это приводит к излишним переносам), но браузеры могут изменять параметры на своё усмотрение.

    В настоящее время это свойство поддерживает только IE/Edge (с префиксом), а Safari ограничивает количество символов через устаревшее свойство из предыдущего черновика CSS3 Text Module. Это означает, что вы можете добиться одинакового эффекта в Edge и Safari (с перспективным планированием для Firefox) с помощью такого кода:

    /* legacy properties */
    -webkit-hyphenate-limit-before: 3;
    -webkit-hyphenate-limit-after: 2;
    
    /* current proposal */
    -moz-hyphenate-limit-chars: 6 3 2; /* not yet supported */
    -webkit-hyphenate-limit-chars: 6 3 2; /* not yet supported */
    -ms-hyphenate-limit-chars: 6 3 2;
    hyphenate-limit-chars: 6 3 2;

    Ограничение числа последовательных переносов

    По эстетическим соображениям можно ограничить количество строк подряд с переносами. Последовательные чёрточки дефисов (три или более), уничижительно называются

    лесенкой

    . Общее эмпирическое правило для английского языка заключается в том, что две строки подряд —идеальный максимум (хотя в немецком лесенки более длинные). По умолчанию CSS не ограничивает количество последовательных дефисов, но можно установить максимальное их количество в свойстве

    hyphenate-limit-lines

    . В настоящее время это поддерживается только IE/Edge и Safari (с префиксами).

    -ms-hyphenate-limit-lines: 2;
    -webkit-hyphenate-limit-lines: 2;
    hyphenate-limit-lines: 2;


    Свойство hyphenate-limit-lines предотвращает лесенку

    Можете снять ограничение с помощью no-limit.

    Запрет переносов в последней строке абзаца

    По умолчанию браузер спокойно переносит самое последнее слово абзаца, так что окончание слова сидит в последней строке, как одинокая сирота. Зачастую предпочтительнее большой пробел в конце предпоследней строки, чем полслова в последней строке. Это устанавливается свойством

    hyphenate-limit-last

    со значением

    always

    .

    hyphenate-limit-last: always;

    В настоящее время свойство поддерживается только в IE/Edge (с префиксом).

    Уменьшение количества дефисов путём установки зоны переноса

    По умолчанию перенос происходит максимально часто, в пределах установленных значений

    hyphenate-limit-chars

    и

    hyphenate-limit-lines

    . Но даже с этими ограничениями возможно чрезмерное насыщение абзацев дефисами.

    Рассмотрим абзац, выровненный по левому краю. Правый край неровный, что частично исправляется переносами. По умолчанию будут переноситься все слова, которые разрешено переносить, что обеспечивает максимальное выравнивание правого края. Если вы готовы смириться с небольшим нарушением выравнивания, можно уменьшить количество переносов.

    Для этого нужно указать максимальное допустимое количество пробелов между последним словом строки и краем текстового поля. Если в данном пространстве начинается новое слово, оно не переносится. Это пространство известно как зона переноса. Чем больше зона переноса, тем сильнее неровность и тем меньше переносов. Регулируя зону, вы ищете оптимальное соотношение между количеством дефисов и заполнением строки.


    Слева: стрелки указывают строки, где перенос разрешён. Справа: перенос с заданной зоной переноса

    Для этого используется свойство hyphenation-limit-zone, где указывается размер в пикселях или процентах (относительно ширины текстового поля). В контексте адаптивного дизайна имеет смысл установить зону переноса в процентах. Это означает, что зона переноса станет меньше на экранах меньшего размера, что вызовет больше переносов и меньше незаполненных строк. И наоборот, на более широких экранах зона переноса расширится, следовательно, будет меньше переносов и больше оборванных строк, которые на широких экранах не так критичны. Основываясь на типичных значениях в программах для вёрстки, можно начать с 8%.

    hyphenate-limit-zone: 8%

    В настоящее время поддерживается только в IE/Edge (с префиксом).

    Всё вместе

    С помощью свойств CSS Text Module Level 4 установим для абзаца те же параметры управления переносами, как в обычных программах для вёрстки:

    p {
        hyphens: auto;
        hyphenate-limit-chars: 6 3 3;
        hyphenate-limit-lines: 2;   
        hyphenate-limit-last: always;
        hyphenate-limit-zone: 8%;
    }

    C соответствующими префиксами и откатами код выглядит так:

    p {
        -webkit-hyphens: auto;
        -webkit-hyphenate-limit-before: 3;
        -webkit-hyphenate-limit-after: 3;
        -webkit-hyphenate-limit-chars: 6 3 3;
        -webkit-hyphenate-limit-lines: 2;
        -webkit-hyphenate-limit-last: always;   
        -webkit-hyphenate-limit-zone: 8%;
    
        -moz-hyphens: auto;
        -moz-hyphenate-limit-chars: 6 3 3;
        -moz-hyphenate-limit-lines: 2;  
        -moz-hyphenate-limit-last: always;
        -moz-hyphenate-limit-zone: 8%;
    
        -ms-hyphens: auto;
        -ms-hyphenate-limit-chars: 6 3 3;
        -ms-hyphenate-limit-lines: 2;
        -ms-hyphenate-limit-last: always;   
        -ms-hyphenate-limit-zone: 8%;
    
        hyphens: auto;
        hyphenate-limit-chars: 6 3 3;
        hyphenate-limit-lines: 2;
        hyphenate-limit-last: always;   
        hyphenate-limit-zone: 8%;
    }

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

    Перенос на новую строку html. Основные варианты решения проблемы переноса слов в CSS.

    Труднопереносимыми бывают не только люди, но и слова. К примеру, химическое соединение очень похожа на некоторых людей с «подвывертом »! Не знаем, как справляться с такими трудными личностями, но с переносом слов CSS точно поможет:

    Зачем переносить «непереносимое»

    В большинстве случаев при отображении текстового содержимого веб-страниц в браузере перенос слов не применяется. Если слово не вмещается целиком в область экрана, то по умолчанию оно полностью «переезжает » на следующую строчку.

    Частичный перенос применяется лишь к длинным и сложным словам, состоящим из нескольких терминов и разделенных дефисом. Вот тут и возникают проблемы отображения этих слов на разных по диагонали экранах и в разных браузерах. При этом точно предугадать, как длинное слово будет «выглядеть » на клиентской стороне трудно, поэтому задавать переносы «вручную » бессмысленно:


    Решаем проблему переноса слов с помощью HTML

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

    • Использование символа мягкого разрыва — — позволяет задать место разрыва сложного слова. При изменении размеров окна браузера на следующую строку переносится только часть длинного слова, стоящая после &shy , а после первой половины выводится знак переноса, похожий на дефис:

    Пример сложного химического соединения и текста — метилпропенилендигидрок-сициннаменилакрилическая кислота


    • Использование тега — элемент появился в HTML 5 . Он также служит для указания браузеру места для разрыва сложного или длинного слова. Но в отличие от предыдущего спецсимвола этот тег не выводит в месте «разлома » знак переноса, что может негативно сказаться на читаемости всего текста:

    метилпропенилендигидроксициннаменилакрилическая кислота


    В некоторых браузерах поддержка тега реализована некорректно. В них он будет работать, если для него в коде CSS прописано свойство display со значением inline-block.

    Перенос слов средствами CSS

    Перед тем, как запретить перенос слов в CSS , давайте рассмотрим несколько свойств, способных разрешить основную проблему:

    1. – описывает, как производить перенос слов, которые по длине не помещаются в установленные размеры контейнера. Сразу стоит предупредить, что с валидацией этого свойства возникают проблемы, и с реализацией его поддержки в CSS консорциум W3C еще не определился. Поэтому специализированные валидаторы при наличии в коде будут выдавать ошибку:


    Тем не менее, это свойство «воспринимается» всеми современными браузерами и является эффективным решением проблемы переноса длинных слов. принимает следующие значения:

    • normal – слова не переносятся;
    • break-word – автоматический перенос слов;
    • inherit – наследование значения родителя.

    Пример, иллюстрирующий применение этого свойства:

    метилпропенилендигидроксициннаменилакрилическая кислота


    В новой спецификации CSS свойство было переименовано в . Оба свойства принимают одинаковые значения. Но поддержка пока реализована слабо, поэтому лучше использовать старую версию свойства:


    Как видно на расположенном выше скриншоте, новое свойство поддерживается Google Chrome , но не поддерживается в IE . Поэтому лучше не использовать для переноса слов в CSS .

    1. word-break – устанавливает правила переноса строк внутри контейнера, если они не помещаются в него по ширине. Это новое свойство, и его поддержка была реализована в CSS3 . Оно является валидным, но предназначено для работы со строками, поэтому перенос слов может производиться грамматически неправильно.

    Свойство принимает три значения:

    • normal – используются правила переноса, установленные по умолчанию;
    • word-break – перенос строк осуществляется автоматически, чтобы слово поместилось в установленные по ширине размеры контейнера;
    • keep-all – отключает автоматический перенос слов в китайском, японском и корейском. Для остальных языков действие значения аналогично normal.

    Синхрофазотрон

    Обеспокоенное состояние

    Одиннадцатиклассница

    метоксихлордиэтиламинометилбутиламин


    1. hyphens – новое свойство, которое появилось с выходом CSS3 . Оно устанавливает, как браузер будет осуществлять перенос слов в выводимом тексте. Свойство принимает несколько значений:
    • none – отключает перенос слов в CSS ;
    • manual (значение по умолчанию ) – слова переносятся в тех участках текстового блока, где это задано с помощью тега или мягкого переноса (-) ;
    • auto – браузер автоматически переносит слова на основе своих настроек.

    Для корректной работы свойства в теге или

    Должен присутствовать атрибут lang со значением «ru» (lang=»ru»).

    Свойство поддерживается последними версиями IE , Opera и Firefox . Для каждого из них прописывается своя строчка CSS . Hyphens не поддерживается Google Chrome . Пример:

    метилпропенилендигидроксициннаменилакрилическая кислота


    Запрет переноса слов

    Иногда нужно сделать так, чтобы строка отображалась полностью без разрыва. Запрет переноса слов в css можно реализовать несколькими способами:

    • С помощью неразрывного пробела &nbsp , который устанавливается в местах переноса строки или слов;
    • Задав свойству white-space значение «nowrap » (white-space: nowrap ).

    Пример реализации:

    метилпропенилендигидроксициннаменилакрилическая кислота раз

    метилпропенилендигидроксициннаменилакрилическая два

    метилпропенилендигидроксициннаменилакрилическая кислота три

    метилпропенилендигидроксициннаменилакрилическая кислота четыри


    Теперь вы сможете переносить с помощью CSS даже самые длинные слова. Но вот с проблемой труднопереносимых людей вам придется разбираться самостоятельно. Попробуйте воздействовать на них методами CSS – может и получиться, хотя мы сами не проверяли.

    CSS3-текст включает свойства для работы с текстом, позволяющие решить проблемы с переносом текста и обрезкой текста в пределах содержимого.

    CSS3-свойства для форматирования текста

    1. Обрезка строки text-overflow

    Свойство позволяет ограничивать длину текста в случае, когда он не умещается в контейнер, визуально обрезая его или отображая многоточием. Свойство работает только при задании следующих условий: должна быть определена ширина контейнера, элемент должен иметь значения overflow: hidden и white-space: nowrap . Не наследуется.

    Синтаксис

    P { width: 300px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } Рис. 1. Обрезка текста с помощью свойства text-overflow

    2. Перенос внутри слов word-break

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

    Синтаксис

    P {word-break: normal;} p {word-break: break-all;} p {word-break: keep-all;}

    3. Перенос слов в строке word-wrap

    Применяется в случаях, когда текст не умещается в свой контейнер и выходит за его границу. Позволяет разрывать длинные слова и переносить их на следующую строку. Наследуется. Срабатывает лишь в случае, если значение white-space разрешает разрыв строк.

    Синтаксис

    P {word-wrap: normal;} p {word-wrap: break-word;}

      Yrii

      Неплохо было бы вам для вашего сайта сделать в конце каждой статьи кнопочку «Следующая статья» или что-то в этом роде. Это было бы очень удобно для пользователей вашего полезного ресурса.

    Тег
    осуществляет перенос строки , разбивает строку: Результат: Тег

    размещенный за ним, будет отображен с новой строки.

    Увеличим расстояние между строками по вертикали:

    Тег
    осуществляет перенос, то есть текст,

    Размещенный за ним, будет отображен с новой строки. Одно дело применять тег
    другое
    перенос строки происходит плавнее и точнее.

    Пример:

    Результат:

    Просто произвольный набор текста для примера.
    Текст набран случайно и так чтобы показать как будет отображаться вывод того или иного свойства css и его параметров к данному классу.
    Все что необходимо знать и как это будет выглядеть в результате примера чуть ниже:

    Пример css расстояние между строками используя свойство line-height

    Для управления межстрочным расстоянием (оно еще называется интерлиньяжем) применяется стилевое свойство line-height. В качестве значения обычно указывается число либо проценты которое определяет межстрочный интервал.
    Например:
    line-height: 2 устанавливает двойной интервал
    line-height: 1.5 полуторный
    line-height: 100% Устанавливает одинарный интервал аналогично line-height: 1
    Примеры использования

    HTML перенос строки, расстояние между строками по вертикалии используя css свойство line-height

    Просто произвольный набор текста для примера. Текст набран случайно и так чтобы показать как будет отображаться вывод того или иного свойства css и его параметров к данному классу. Все что необходимо знать и как это будет выглядеть в результате примера чуть ниже

    Просто произвольный набор текста для примера. Текст набран случайно и так чтобы показать как будет отображаться вывод того или иного свойства css и его параметров к данному классу. Все что необходимо знать и как это будет выглядеть в результате примера чуть ниже

    Просто произвольный набор текста для примера. Текст набран случайно и так чтобы показать как будет отображаться вывод того или иного свойства css и его параметров к данному классу. Все что необходимо знать и как это будет выглядеть в результате примера чуть ниже

    Результат вывода:

    Просто произвольный набор текста для примера. Текст набран случайно и так чтобы показать как будет отображаться вывод того или иного свойства css и его параметров к данному классу. Все что необходимо знать и как это будет выглядеть в результате примера чуть ниже

    Просто произвольный набор текста для примера. Текст набран случайно и так чтобы показать как будет отображаться вывод того или иного свойства css и его параметров к данному классу. Все что необходимо знать и как это будет выглядеть в результате примера чуть ниже

    Просто произвольный набор текста для примера. Текст набран случайно и так чтобы показать как будет отображаться вывод того или иного свойства css и его параметров к данному классу. Все что необходимо знать и как это будет выглядеть в результате примера чуть ниже

    Просто произвольный набор текста для примера. Текст набран случайно и так чтобы показать как будет отображаться вывод того или иного свойства css и его параметров к данному классу. Все что необходимо знать и как это будет выглядеть в результате примера чуть ниже

    Иногда бывают конфликты стилей и чтобы их разрешить надо использовать параметры внутри данного элемента на примере div чуть ниже
    Меня часто просят подстроить тот или иной элемент вывода к красивому исполнению на разных cms. Но когда мне предоставляют шаблон то там часто бывают конфликты стилей блочных элементов и чтобы их разрешить приходится прибегать к использованию стилей внутри каждого эелемента чтобы быстро и в короткие строки подстроить нужный элемент к нужному выводу.
    Например чтобы применить тот же стиль что и в классе для див по примеру выше можно сделать так

    Просто произвольный набор текста для примера. Текст набран случайно и так чтобы показать как будет отображаться вывод того или иного свойства css и его параметров к данному классу. Все что необходимо знать и как это будет выглядеть в результате примера чуть ниже

    Просто произвольный набор текста для примера. Текст набран случайно и так чтобы показать как будет отображаться вывод того или иного свойства css и его параметров к данному классу. Все что необходимо знать и как это будет выглядеть в результате примера чуть ниже

    Просто произвольный набор текста для примера. Текст набран случайно и так чтобы показать как будет отображаться вывод того или иного свойства css и его параметров к данному классу. Все что необходимо знать и как это будет выглядеть в результате примера чуть ниже

    Просто произвольный набор текста для примера. Текст набран случайно и так чтобы показать как будет отображаться вывод того или иного свойства css и его параметров к данному классу. Все что необходимо знать и как это будет выглядеть в результате примера чуть ниже

    Как видите параметры класса которые были бы в стиле выше сохранились но мы переопределили только те параметры которые на необходимы были и они идут последними
    Результат:

    Просто произвольный набор текста для примера. Текст набран случайно и так чтобы показать как будет отображаться вывод того или иного свойства css и его параметров к данному классу. Все что необходимо знать и как это будет выглядеть в результате примера чуть ниже

    Просто произвольный набор текста для примера. Текст набран случайно и так чтобы показать как будет отображаться вывод того или иного свойства css и его параметров к данному классу. Все что необходимо знать и как это будет выглядеть в результате примера чуть ниже

    Просто произвольный набор текста для примера. Текст набран случайно и так чтобы показать как будет отображаться вывод того или иного свойства css и его параметров к данному классу. Все что необходимо знать и как это будет выглядеть в результате примера чуть ниже

    Просто произвольный набор текста для примера. Текст набран случайно и так чтобы показать как будет отображаться вывод того или иного свойства css и его параметров к данному классу. Все что необходимо знать и как это будет выглядеть в результате примера чуть ниже


    В данных уроках вы научились создавать переносы строк и расстояние между строками с помощью css line-height на различных примерах данного урока.

    В этой главе:

    Абзацы

    Любой текст имеет свою уникальную структуру: книги разделены на части, разделы и главы, газеты и журналы имеет отдельные рубрики и подзаголовки, которые, в свою очередь, включают фрагменты текста, также имеющие собственную структуру: абзацы, отступы и пр.

    Текст, размещаемый на веб-страницах, не является исключением, он также должен иметь логическую, понятную каждому пользователю, структуру. Ведь от того, насколько удобно и просто будет восприниматься текст на странице, зависит многое: прежде всего, какое впечатление сложится у посетителя о вашем сайте.

    Для создания таких структурных единиц текста, как абзацы, в HTML-документах используется тег

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

    Не забывайте про закрывающий тег

    Большинство браузеров будут отображать HTML документ корректно, даже если вы забыли про закрывающий тег.

    Абзац

    Другой абзац

    Этот код будет работать в большинстве браузеров, но не полагайтесь на это. Забытый закрывающий тег может привести к непредвиденным результатам или ошибкам.

    Красная строка

    Что такое красная строка? Согласно определению, это начальная строка абзаца, которую раньше выделяли красным цветом (откуда и пошло название). До того, как было изобретено книгопечатание, книги писали от руки – главу или часть текста, первое слово или букву писали красной краской. Так появилось понятие «писать с красной строки» — это означает начало новой мысли, главы или части.

    Однако при создании веб-страниц оформление красной строки используется достаточно редко, несмотря на то, что она позволяет с гораздо большим удобством воспринимать текст в визуальном плане, что для традиционного читателя достаточно важно – не всем удобно читать электронный вариант текста.

    Для добавления красной строки к вашим абзацам нужно воспользоваться CSS свойством text-indent , которое позволяет поставить отступ перед первым предложением:

    В примере, приведенном выше, первая строка каждого абзаца на странице будет начинаться с отступа в 25px. Пример, расположенный ниже, демонстрирует, как можно задать красную строку только для определенного абзаца на странице.

    Как и в любом настоящем искусстве, в хороших текстах нет мелочей, к которым некоторые относят и красную строку, считая, что употребление ее не так уж и важно. Однако надо понимать, что любая запятая несет в себе как эстетическую, так и смысловую нагрузку, а не только является данью правилам грамматики – это касается и форматирования.

    Примечание: не обязательно устанавливать отступ размером в 25px, вы можете выбрать оптимальный размер отступа сами, также с помощью свойства text-indent возможно сделать выступающую над остальным текстом строку, для этого нужно задать отрицательное значение для свойства (например: -30px).

    Перенос строки

    В ходе создания HTML-документа может возникнуть необходимость переноса строки внутри абзаца: например, при размещении отрывка из стихотворения каждая фраза должна начинаться с новой строки.

    Обратите внимание, что вы не сможете изменить вид отображения текста на странице с помощью добавления в код дополнительных пробелов или переносов строки. Любое количество пробелов и переносов строк будет считаться как один пробел, так как браузер будет автоматически удалять все лишние пробелы и переносы строк, в этом случае браузер отобразит отрывок стихотворения в виде одного предложения:

    Заглянула осень в сад — Птицы улетели. За окном с утра шуршат Жёлтые метели.

    Обратите внимание, что браузер игнорирует ваше форматирование текста

    В таких случаях самым лучшим выходом из ситуации будет использование тега
    (вставляет перенос строки). Он является одним из пустых элементов, у которых нет содержимого. Пустые теги, такие как br, изначально не имеют никакого содержимого, поэтому для их использования было придумано краткое описание для представления элемента, то есть в то место, где нужно добавить разрыв строки, просто подставляется тег
    . Краткое описание подразумевает то, что этот тег не имеет закрывающего тега. Если не было бы краткого описания, пришлось бы каждый раз для обозначения разрыва строки писать
    , а разве это было бы удобнее?!

    Примите во внимание, что краткое описание придумано и используется не из-за лени, а для повышения эффективности, за счет более легкого чтения кода. И в самом деле, спустя некоторое время, проведенное за чтением HTML-кода, вы увидите, что такие элементы легче воспринимаются и запоминаются.

    Это обычный
    абзац с разры-
    вом строки

    Для переноса текста на несколько строк тег
    ставится соответствующее количество раз.

    Описание тега

    Тег BR (break, английский — разрыв) служит для принудительного разрыва строки и напоминает по своему действию нажатие кнопки Enter в текстовом редакторе. Этот тег нельзя использовать для создания нового абзаца так, как для этого есть тег Р. Вообще старайтесь использовать этот тег оправдано. Если текст, в котором используется тег переноса строки BR, содержит плавающий объект, то для управления обтеканием можно использовать атрибут CLEAR. Хотя этот атрибут и поддерживается браузерами, но он осуждается спецификациями HTML 4.01 и XHTML. В спецификациях HTML 5 и XHTML 1.1 использование этого атрибута вообще запрещено. Пользуйтесь лучше стилевыми свойствами(clear).

    Браузеры

    Тег поддерживается следующими браузерами и их версиями:

    Синтаксис тега BR

    HTML
    XHTML

    Атрибуты тега:

    Тег поддерживает также глобальные атрибуты и события.

    Пример BR:

    Пример тег BRа

    Вот пример переноса строки.
    Напоминает как при печати на машинке 40ых годов.
    И всеже перенос карретки остался, и есть в HTML.

    Рекомендуем также

    Css принудительный перенос слов. Переносы слов в HTML. Включаем перенос для слов, которые не влезают

    Описание

    Свойство white-space устанавливает, как отображать пробелы между словами. В обычных условиях любое количество пробелов в коде HTML показывается на веб-странице как один. Исключением является тег

    Помещенный в этот контейнер текст выводится со всеми пробелами, как он был отформатирован
     пользователем. Таким образом, white-space
     имитирует
     работу тега 
    Но в отличие от него не меняет шрифт
     на моноширинный.
     

    Синтаксис

    white-space: normal | nowrap | pre | pre-line | pre-wrap | inherit

    Значения

    normal Текст в окне браузера выводится как обычно, переносы строк устанавливаются автоматически. nowrap Пробелы не учитываются, переносы строк в коде HTML игнорируются, весь текст отображается одной строкой; вместе с тем, добавление тега
    переносит текст на новую строку. pre Текст показывается с учетом всех пробелов и переносов, как они были добавлены разработчиком в коде HTML. Если строка получается слишком длинной и не помещается в окне браузера, то будет добавлена горизонтальная полоса прокрутки. pre-line В тексте пробелы не учитываются, текст автоматически переносится на следующую строку, если он не помещается в заданную область. pre-wrap В тексте сохраняются все пробелы и переносы, однако если строка по ширине не помещается в заданную область, то текст автоматически будет перенесен на следующую строку. inherit Наследует значение родителя.

    Действие значений на текст представлено в табл. 1.

    HTML5 CSS2.1 IE Cr Op Sa Fx

    white-space

    Пример

    Великая теорема Ферма
    X n + Y n = Z n
    где n - целое число > 2

    Результат данного примера показан на рис. 1.

    Рис. 1. Применение свойства white-space

    Объектная модель

    document.getElementById("elementID ").style.whiteSpace

    Браузеры

    Браузер Internet Explorer до версии 7.0 включительно не поддерживает значения pre-line , pre-wrap и inherit . Для

    Opera до версии 9.5 не поддерживает значение pre-line . Для значения normal и pre ведут себя как pre-wrap , а значение nowrap ведет себя как pre-line .

    Safari до версии 3.0 и iOS не поддерживают значения pre-wrap и pre-line .

    Firefox до версии 2.0 включительно не поддерживает значения pre-line и pre-wrap . Для значения normal , nowrap , и pre воспринимаются как pre-wrap .

    Автоматический топорный перенос слов (без добавление дефисов).

    Интересуемые значения свойства:

    • break-all
      Автоматический перенос всех слов, текст выглядик как выровненный по ширине.
    • break-word (используется на этом сайте в заголовках)
      Перенос отдельных слов, которые не поместилось в заданную ширину блока.

    Светлое будущее. СSS cвойство hyphens

    Правила переносов определяются словарём встроенным в браузер. Свойство работает при наличии атрибута lang с кодом языка на уровне всего документа или отдельных его частей.

    Интересуемые значения:

    • manual (используется по умолчанию)
      Слова переносятся только в тех местах текста, где добавлен спецсимвол &shy (мягкий перенос) или тег . Спецсимволы вручную расставляются в тексте, не видны в обычном тексте и если слово не помещается, браузер в месте нахождения спецсимвола создаёт перенос. Спецсимвол &shy при переносе слова добавлять дефис (как учили в школе), а тег нет.
    • auto
      Браузер добавляет переносы автоматически на основе встроенного словаря. До сих пор слабая поддержка браузерами, в хроме не работает(.

    Программиирование — процесс и искусство создания компьютерных программ с помощью языков програм&shyмирования.

    p { hyphens: auto; }

    Запрет переносов

    Существует обратная задача — запретить переносы. Например, не отделять инициалы от фамилии или единицы измерения от значений (100 кг). Чтобы браузер не добавлял переносы, следует вместо обычного пробела написать неразрывный пробел &nbsp

    Также у CSS свойства hyphens существует значеие none , когда слова не переносятся, даже при наличии в тексте мягких переносов.

    Интернет состоит из контента, контент состоит из слов, а слова могут быть очень и очень длинными. И рано или поздно вебмастер сталкивается с проблемой переноса длинных слов. Эта проблема особенно актуальна для адаптивного дизайна, и для небольших блоков контента. Итак, как же справиться с этой проблемой?

    Дефис

    Первое решение для переноса длинных слов – с помощью дефиса.

    Defisi { -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; hyphens: auto; }

    Поддержка браузерами: CSS-дефисы поддерживаются почти всеми современными браузерами, за исключением Chrome, Opera, Android. Также, очень часто дефис вставляется в местах, ошибочных с грамматической точки зрения.

    Обрыв слова

    Обрыв слова – это свойство CSS, указывающее на то, следует ли разрывать строки внутри слов.

    Obriv-slova { -ms-word-break: break-all; word-break: break-all; word-break: break-word; }

    Поддержка браузерами: Обрыв слов поддерживается во всех браузерах, за исключением Opera Mini и старых версий Opera.

    Обертка переполнения

    Следующее решение – это использование Обертки переполнения (overflow-wrap).

    Obertka-perepolneniya { word-wrap: break-word; overflow-wrap: break-word; }

    Поддержка браузерами: поддерживается практически во всех браузерах. Примечание: Некоторые браузеры требуют использования «word-wrap» вместо «overflow-wrap».

    Многоточие

    Еще один вариант – использование многоточий.

    Mnogotochiye { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

    Поддержка браузерами: поддерживается всеми современными браузерами.

    Это работающий метод, но далеко не идеальный.

    Финальное решение: Использование Обертки переполнения и дефиса.

    Finalnoye-resheniye { overflow-wrap: break-word; word-wrap: break-word; -webkit-hyphens: auto; -ms-hyphens: auto; -moz-hyphens: auto; hyphens: auto; }

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

    Как сделать новую строчку в html. Разрыв строки в HTML: используем тег br.

    Здравствуйте, в этом небольшом уроке я расскажу, как переносить текст и как запретить перенос текста на новую строку.

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

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

    Для переноса текста на новую строку служит элемент BR , он не требует закрывающего тега, однако рекомендуется записывать его открывающий тег как br /> .

    При использовании элемента BR пустая строка после переноса не добавляется.

    Еще элемент BR используют, когда нужно задать обтекание текстом таблицы, изображения или любого другого плавающего элемента страницы, то есть элемента, для которого задан атрибут align .

    Для этого применяют атрибут clear элемента BR .

    Он может принимать следующие значения:

    all – запрещает обтекание элемента с двух сторон.

    left – запрещает обтекание с левой стороны плавающего объекта.

    right – запрещает обтекание с правой стороны плавающего объекта.

    none – отменяет свойство.

    Если обтекание запрещено, то текст, следующий за элементом BR , будет отобра­жаться на строке после плавающего объекта

    Ночь, улица, фонарь, аптека,
    Бессмысленный и тусклый свет.
    Живи ещё хоть четверть века —
    Всё будет так. Исхода нет.

    Умрёшь — начнёшь опять сначала
    И повторится всё, как встарь:
    Ночь, ледяная рябь канала,
    Аптека, улица, фонарь.

    Результат:


    Кроме обязательного переноса строки, иногда нужно использовать обратное действие, то есть гарантировать, что текст не будет перенесен на новую строку ни в коем случае.

    Труднопереносимыми бывают не только люди, но и слова. К примеру, химическое соединение очень похожа на некоторых людей с «подвывертом »! Не знаем, как справляться с такими трудными личностями, но с переносом слов CSS точно поможет:

    Зачем переносить «непереносимое»

    В большинстве случаев при отображении текстового содержимого веб-страниц в браузере перенос слов не применяется. Если слово не вмещается целиком в область экрана, то по умолчанию оно полностью «переезжает » на следующую строчку.

    Частичный перенос применяется лишь к длинным и сложным словам, состоящим из нескольких терминов и разделенных дефисом. Вот тут и возникают проблемы отображения этих слов на разных по диагонали экранах и в разных браузерах. При этом точно предугадать, как длинное слово будет «выглядеть » на клиентской стороне трудно, поэтому задавать переносы «вручную » бессмысленно:


    Решаем проблему переноса слов с помощью HTML

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

    • Использование символа мягкого разрыва — — позволяет задать место разрыва сложного слова. При изменении размеров окна браузера на следующую строку переносится только часть длинного слова, стоящая после &shy , а после первой половины выводится знак переноса, похожий на дефис:

    Пример сложного химического соединения и текста — метилпропенилендигидрок-сициннаменилакрилическая кислота


    • Использование тега — элемент появился в HTML 5 . Он также служит для указания браузеру места для разрыва сложного или длинного слова. Но в отличие от предыдущего спецсимвола этот тег не выводит в месте «разлома » знак переноса, что может негативно сказаться на читаемости всего текста:

    метилпропенилендигидроксициннаменилакрилическая кислота


    В некоторых браузерах поддержка тега реализована некорректно. В них он будет работать, если для него в коде CSS прописано свойство display со значением inline-block.

    Перенос слов средствами CSS

    Перед тем, как запретить перенос слов в CSS , давайте рассмотрим несколько свойств, способных разрешить основную проблему:

    1. – описывает, как производить перенос слов, которые по длине не помещаются в установленные размеры контейнера. Сразу стоит предупредить, что с валидацией этого свойства возникают проблемы, и с реализацией его поддержки в CSS консорциум W3C еще не определился. Поэтому специализированные валидаторы при наличии в коде будут выдавать ошибку:


    Тем не менее, это свойство «воспринимается» всеми современными браузерами и является эффективным решением проблемы переноса длинных слов. принимает следующие значения:

    • normal – слова не переносятся;
    • break-word – автоматический перенос слов;
    • inherit – наследование значения родителя.

    Пример, иллюстрирующий применение этого свойства:

    метилпропенилендигидроксициннаменилакрилическая кислота


    В новой спецификации CSS свойство было переименовано в . Оба свойства принимают одинаковые значения. Но поддержка пока реализована слабо, поэтому лучше использовать старую версию свойства:


    Как видно на расположенном выше скриншоте, новое свойство поддерживается Google Chrome , но не поддерживается в IE . Поэтому лучше не использовать для переноса слов в CSS .

    1. word-break – устанавливает правила переноса строк внутри контейнера, если они не помещаются в него по ширине. Это новое свойство, и его поддержка была реализована в CSS3 . Оно является валидным, но предназначено для работы со строками, поэтому перенос слов может производиться грамматически неправильно.

    Свойство принимает три значения:

    • normal – используются правила переноса, установленные по умолчанию;
    • word-break – перенос строк осуществляется автоматически, чтобы слово поместилось в установленные по ширине размеры контейнера;
    • keep-all – отключает автоматический перенос слов в китайском, японском и корейском. Для остальных языков действие значения аналогично normal.

    Синхрофазотрон

    Обеспокоенное состояние

    Одиннадцатиклассница

    метоксихлордиэтиламинометилбутиламин


    1. hyphens – новое свойство, которое появилось с выходом CSS3 . Оно устанавливает, как браузер будет осуществлять перенос слов в выводимом тексте. Свойство принимает несколько значений:
    • none – отключает перенос слов в CSS ;
    • manual (значение по умолчанию ) – слова переносятся в тех участках текстового блока, где это задано с помощью тега или мягкого переноса (-) ;
    • auto – браузер автоматически переносит слова на основе своих настроек.

    Для корректной работы свойства в теге или

    Должен присутствовать атрибут lang со значением «ru» (lang=»ru»).

    Свойство поддерживается последними версиями IE , Opera и Firefox . Для каждого из них прописывается своя строчка CSS . Hyphens не поддерживается Google Chrome . Пример:

    метилпропенилендигидроксициннаменилакрилическая кислота


    Запрет переноса слов

    Иногда нужно сделать так, чтобы строка отображалась полностью без разрыва. Запрет переноса слов в css можно реализовать несколькими способами:

    • С помощью неразрывного пробела &nbsp , который устанавливается в местах переноса строки или слов;
    • Задав свойству white-space значение «nowrap » (white-space: nowrap ).

    Пример реализации:

    метилпропенилендигидроксициннаменилакрилическая кислота раз

    метилпропенилендигидроксициннаменилакрилическая два

    метилпропенилендигидроксициннаменилакрилическая кислота три

    метилпропенилендигидроксициннаменилакрилическая кислота четыри


    Теперь вы сможете переносить с помощью CSS даже самые длинные слова. Но вот с проблемой труднопереносимых людей вам придется разбираться самостоятельно. Попробуйте воздействовать на них методами CSS – может и получиться, хотя мы сами не проверяли.

    Описание тега

    Тег BR (break, английский — разрыв) служит для принудительного разрыва строки и напоминает по своему действию нажатие кнопки Enter в текстовом редакторе. Этот тег нельзя использовать для создания нового абзаца так, как для этого есть тег Р. Вообще старайтесь использовать этот тег оправдано. Если текст, в котором используется тег переноса строки BR, содержит плавающий объект, то для управления обтеканием можно использовать атрибут CLEAR. Хотя этот атрибут и поддерживается браузерами, но он осуждается спецификациями HTML 4.01 и XHTML. В спецификациях HTML 5 и XHTML 1.1 использование этого атрибута вообще запрещено. Пользуйтесь лучше стилевыми свойствами(clear).

    Браузеры

    Тег поддерживается следующими браузерами и их версиями:

    Синтаксис тега BR

    HTML
    XHTML

    Атрибуты тега:

    Тег поддерживает также глобальные атрибуты и события.

    Пример BR:

    Пример тег BRа

    Вот пример переноса строки.
    Напоминает как при печати на машинке 40ых годов.
    И всеже перенос карретки остался, и есть в HTML.

    В этой главе:

    Абзацы

    Любой текст имеет свою уникальную структуру: книги разделены на части, разделы и главы, газеты и журналы имеет отдельные рубрики и подзаголовки, которые, в свою очередь, включают фрагменты текста, также имеющие собственную структуру: абзацы, отступы и пр.

    Текст, размещаемый на веб-страницах, не является исключением, он также должен иметь логическую, понятную каждому пользователю, структуру. Ведь от того, насколько удобно и просто будет восприниматься текст на странице, зависит многое: прежде всего, какое впечатление сложится у посетителя о вашем сайте.

    Для создания таких структурных единиц текста, как абзацы, в HTML-документах используется тег

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

    Не забывайте про закрывающий тег

    Большинство браузеров будут отображать HTML документ корректно, даже если вы забыли про закрывающий тег.

    Абзац

    Другой абзац

    Этот код будет работать в большинстве браузеров, но не полагайтесь на это. Забытый закрывающий тег может привести к непредвиденным результатам или ошибкам.

    Красная строка

    Что такое красная строка? Согласно определению, это начальная строка абзаца, которую раньше выделяли красным цветом (откуда и пошло название). До того, как было изобретено книгопечатание, книги писали от руки – главу или часть текста, первое слово или букву писали красной краской. Так появилось понятие «писать с красной строки» — это означает начало новой мысли, главы или части.

    Однако при создании веб-страниц оформление красной строки используется достаточно редко, несмотря на то, что она позволяет с гораздо большим удобством воспринимать текст в визуальном плане, что для традиционного читателя достаточно важно – не всем удобно читать электронный вариант текста.

    Для добавления красной строки к вашим абзацам нужно воспользоваться CSS свойством text-indent , которое позволяет поставить отступ перед первым предложением:

    В примере, приведенном выше, первая строка каждого абзаца на странице будет начинаться с отступа в 25px. Пример, расположенный ниже, демонстрирует, как можно задать красную строку только для определенного абзаца на странице.

    Как и в любом настоящем искусстве, в хороших текстах нет мелочей, к которым некоторые относят и красную строку, считая, что употребление ее не так уж и важно. Однако надо понимать, что любая запятая несет в себе как эстетическую, так и смысловую нагрузку, а не только является данью правилам грамматики – это касается и форматирования.

    Примечание: не обязательно устанавливать отступ размером в 25px, вы можете выбрать оптимальный размер отступа сами, также с помощью свойства text-indent возможно сделать выступающую над остальным текстом строку, для этого нужно задать отрицательное значение для свойства (например: -30px).

    Перенос строки

    В ходе создания HTML-документа может возникнуть необходимость переноса строки внутри абзаца: например, при размещении отрывка из стихотворения каждая фраза должна начинаться с новой строки.

    Обратите внимание, что вы не сможете изменить вид отображения текста на странице с помощью добавления в код дополнительных пробелов или переносов строки. Любое количество пробелов и переносов строк будет считаться как один пробел, так как браузер будет автоматически удалять все лишние пробелы и переносы строк, в этом случае браузер отобразит отрывок стихотворения в виде одного предложения:

    Заглянула осень в сад — Птицы улетели. За окном с утра шуршат Жёлтые метели.

    Обратите внимание, что браузер игнорирует ваше форматирование текста

    В таких случаях самым лучшим выходом из ситуации будет использование тега
    (вставляет перенос строки). Он является одним из пустых элементов, у которых нет содержимого. Пустые теги, такие как br, изначально не имеют никакого содержимого, поэтому для их использования было придумано краткое описание для представления элемента, то есть в то место, где нужно добавить разрыв строки, просто подставляется тег
    . Краткое описание подразумевает то, что этот тег не имеет закрывающего тега. Если не было бы краткого описания, пришлось бы каждый раз для обозначения разрыва строки писать
    , а разве это было бы удобнее?!

    Примите во внимание, что краткое описание придумано и используется не из-за лени, а для повышения эффективности, за счет более легкого чтения кода. И в самом деле, спустя некоторое время, проведенное за чтением HTML-кода, вы увидите, что такие элементы легче воспринимаются и запоминаются.

    Это обычный
    абзац с разры-
    вом строки

    Для переноса текста на несколько строк тег
    ставится соответствующее количество раз.

    Перевод строки, перенос строки, перенос на новую строку – это все об одном. В языке HTML перенос на новую строку применяется часто. Есть несколько путей: использовать тег
    для перевода на новую строку, а можно использовать свойства CSS для переноса строки. Рассмотрим пример использования тега переноса строки:

    В CSS перенос строки можно осуществить по-разному, например вот так:

    Br { float: left; width: 100%; margin: 0 0 20px 0; /* отступ после строки 20 пикселей */ }

    Разделительная линия при помощи HTML или CSS

    В HTML создать разделительную линию очень просто. Используется тоже непарный тег


    — это и есть разделительная линия. Разделительная линия начинается с новой строки и после нее есть отступ. Вы можете управлять стилем горизонтальной линии, а так же можно сделать альтернативу ей. Далее пример разделительной линии при помощи тега:

    А теперь давайте стилизуем (изменим стили, изменим внешний вид) нашу разделительную линию:

    hr { width: 80%; /* ширина линии */ height: 4px; /* высота / толщина линии */ background: #333; /* фон / цвет линии */ border: 0; /* рамка вокруг разделительной линии (уберем ее) */ margin: 5px 0 5px 0; /* отступ над и под линией 5 пикселей */ }

    И создадим альтернативу нашей разделительной линии при помощи тега

    и CSS:

    Line { width: 80%; /* ширина линии */ height: 4px; /* высота / толщина линии */ background: #333; /* фон / цвет линии */ border: 0; /* рамка вокруг разделительной линии (уберем ее) */ margin: 5px 0 5px 0; /* отступ над и под линией 5 пикселей */ }

    html — как отключить прерывание в css?

    html — как отключить прерывание в css? — Переполнение стека

    Присоединяйтесь к Stack Overflow , чтобы учиться, делиться знаниями и строить свою карьеру.

    Спросил

    Просмотрено 4к раз

    На этот вопрос уже есть ответы здесь :

    Закрыт 5 лет назад.

    как отключить битое слово в CSS? Если слово содержит перенос с клавиатуры, а не мягкий перенос.

    Например: Однажды разговаривая с моим однокурсником по комнате

    Создан 20 янв.

    vkfjsvkfjs

    9122 серебряных знака1111 бронзовых знаков

    0

    Используйте white-space: nowrap

      p {
        белое пространство: nowrap;
    }
      

    Если вы хотите использовать nowrap только для части текста, вы можете просто поместить этот текст в элемент span , а затем применить к нему nowrap.

    Еще один гораздо более простой способ предотвратить перенос строки с переносом — заменить переносимый на клавиатуре перенос на & # 8209; . Это сделает его неразрывным дефисом.

    Обновленный пример на jsFiddle

    csscss3html