Запрет переноса строки css – Как предотвратить перенос каждого слова на новую строку у абсолютно спозиционированного элемента?

Содержание

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

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

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

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

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

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

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

break-all:

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

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

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

.braek-test1{ word-break:normal; }

.braek-test1{

word-break:normal;

}

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

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

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

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

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

Сегодня у меня все. Надеюсь, показанный в данной статье прием работы поможет вам при создании вашего сайта и адаптации его под мобильные устройства, и у вас не возникнет проблем при необходимости запретить перенос слов 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 ExplorerChromeOperaSafariFirefoxAndroidiOS
    6.0+8.0+1.0+4.0+9.5+1.0+3.0+1.0+3.5+1.0+1.0+
    Краткая информация
    Версии CSS
    CSS 1CSS 2CSS 2.1CSS 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 ExplorerChromeOperaSafariFirefoxAndroidiOS
    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 1CSS 2CSS 2.1CSS 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 запрет переноса строки — Вэб-шпаргалка для интернет предпринимателей!

    Как сделать или запретить перенос строки: 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 ExplorerChromeOperaSafariFirefoxAndroidiOS
    6.0+8.0+1.0+4.0+9.5+1.0+3.0+1.0+3.5+1.0+1.0+
    Краткая информация
    Версии CSS
    CSS 1CSS 2CSS 2.1CSS 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; и посмотрите на наш полигон.

    У меня в CSS есть стиль, которым я покрываю нужное мне словосочетание (2 слова обычно). Хочу, чтобы эти два слова не разделялись переносом строки.

    Допустим после слова «два» у меня должен идти перенос строки (потому что она заканчивается), но я хочу чтобы в таком случае перенос состоялся ДО слова «два», то есть перенеслось сразу словосочетание «два слова».

    Глобально по документу прописан word-wrap: break-word;

    Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
    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 1CSS 2CSS 2.1CSS 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. Как добавить с помощью свойств 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 разрешает разрыв строк.

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

    Свойство word-wrap

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

    Проверка перенова слов

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

    Первое свойство, к которому стоит обратиться для обработки текста, — это word-wrap. Принимает три значения: normal, break-all и keep-all. Вам для работы понадобится запомнить только break-all. Normal стоит по умолчанию, и его нет смысла указывать. Keep-all означает в документе CSS запрет переноса строки. Разработано специально для китайских, японских и корейских иероглифов. Поэтому, если вы не собираетесь вести блог на каком-то из этих языков, свойство вам не пригодится. А также оно не поддерживается браузером Safari и мобильными телефонами на базе iOS.

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

    P{ font: bold 30px Helvetica, sans-serif; width: 25px; word-wrap: break-all; }

    Ширина и размер шрифта подбирается таким образом, чтобы места хватало только для одной буквы. Word-wrap со значением break-all сообщает браузеру, что слово нужно каждый раз переносить на новую строку. Незаменимым это свойство назвать нельзя. Но оно пригодится при оформлении небольших блоков с текстом, например полей для ввода комментариев.

    Свойство white-space

    Распространенная ошибка начинающих веб-разработчиков — пытаться редактировать текст пробелами или нажатиями клавиши Enter, а потом удивляться, почему их усилия не видны на стран

    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 ExplorerChromeOperaSafariFirefoxAndroidiOS
    6.0+8.0+1.0+4.0+9.5+1.0+3.0+1.0+3.5+1.0+1.0+
    Краткая информация
    Версии CSS
    CSS 1CSS 2CSS 2.1CSS 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; и посмотрите на наш полигон.

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

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

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

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

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

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

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

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

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

    Поговорим о свойстве white-space | CSS-Tricks по-русски

    Поговорим о свойстве white-space

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

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

    Немного об HTML.

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

    Если вы хотите чтобы все ваши пробелы и переводы строк отображались как в исходном HTML, то вам необходимо использовать тег pre, всё содержимое которого будет отображаться в соответствии с исходным кодом страницы.

    Кроме того, можно воспользоваться неразрывным пробелом ( ), в случае, если вам необходимо, чтобы строки не «схлопывались». Также, в предыдущих версиях HTML был тег nobr для таких целей. Сейчас этот тег не рекомендуется к использованию.

    Свойство white-space — это шаг к семантически чистому HTML. Вы можете настроить обработку браузером пробелов, используя CSS.

    Определение и возможные значения.

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

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

    white-space: normal

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

    Повторяющиеся пробелы и разрывы строк игнорируются, для того чтобы наиболее естественно отобразить текст.
    white-space: nowrap

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

    Элемент, для которого значение свойства установлено как nowrap, не позволяет тексту и другим inline-элементам переносится естественным образом на новую строку. Вместо этого он продолжает вывод за своими границами, до тех пор, пока текст не закончится, оставляя его на одной линии. Это значение не оказывает никакого эффекта на повторяющиеся пробелы между словами, они по-прежнему «схлопываются» в один, как обычно.

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

    Это значение работает именно так, как ожидается: точно также, как и содержимое тега pre. Все пробелы и переводы строк выводятся точно также как и в исходном HTML. Если какая-нибудь строка шире, чем её родитель, то она не будет разрываться, а будет выводится как одна строка.

    Повторяющиеся пробелы и переводы строк выводятся так же как и в исходной разметке, естественные переводы строк не работают.
    white-space: pre-line

    Это свойство работает также как и normal, за исключением одного момента: переводы строк в исходной разметке являются значимыми. Таким образом, если в разметке между словами несколько пробелом, они будут проигнорированы как обычно, однако, если в разметке встречается перевод строки, при выводе, текст также будет перенесён на новую строку. Это значение не поддерживается в Internet Explorer до 7-ой версии, FireFox до 3-ей версии и Opera до версии 9.2.

    Повторяющиеся пробелы игнорируются, переводы строк обрабатываюся.
    white-space: pre-wrap

    Это значение определяет такое же поведение как и значение pre, за тем исключением что строка переносится в соответствии с границами родительского элемента. Таким образом, текст будет переносится на новую строку, как это было бы при значении normal, а также будут считываться множественные пробелы и переводы строк исходного HTML. Это свойство не поддерживается в Internet Explorer до версии 7, а также FireFox до версии 3.

    Обрабатываюся повторяющиеся пробелы и явные переводы строк, а также естественные переводы строк.
    Варианты использования

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

    На показанном скриншоте, ссылка «Read more »» кавычка (») перенеслась на новую строку, поскольку ей не хватило места. Этого можно избежать применив к ссылке значение nowrap. В этом случае ссылка будет перенесена на новую строку целиком, как неразрывный элемент. Обратите внимание, что свойство white-space было применено только к содержимому элемента. Поэтому ссылка и была перенесена на новую строку целиком. Текст внутри неё — неразрывен.

    Заблуждения

    У новичков вёрстки часто возникает недопонимание при использовании white-space: nowrap, в случае если они применяют его к inline-элементу и ожидают что он не будет переносится на новую строку. Стоит запомнить, что свойство применяется только к inline-элементам, которые находятся внутри элемента, к которому его применили, а также не оказывают никакого эффекта на блочные элементы и отступы между ними.

    word-wrap | htmlbook.ru

    Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
    6.0+1.0+10.5+1.0+3.5+1.0+1.0+

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

    Значение по умолчаниюnormal
    НаследуетсяДа
    ПрименяетсяКо всем элементам
    Процентная записьНеприменима
    Ссылка на спецификациюhttp://www.w3.org/TR/css3-text/#word-wrap

    Версии CSS

    CSS 1CSS 2CSS 2.1CSS 3

    Описание

    Свойство word-wrap указывает, переносить или нет длинные слова, которые не помещаются по ширине в заданную область. Данное свойство носит черновой характер и при валидации документа на CSS3 выдает ошибку.

    Синтаксис

    word-wrap: normal | break-word | inherit

    Значения

    normal
    Строки не переносятся или переносятся в тех местах, где явно задан перенос (например, с помощью тега <br>).
    break-word
    Перенос строк добавляется автоматически, чтобы слово поместилось в заданную ширину блока.
    inherit
    Наследует значение родителя.

    Пример

    HTML5CSS2.1CSS3IECrOpSaFx

    <!DOCTYPE html>
    <html>
     <head>
      <meta charset="utf-8">
      <title>word-wrap</title>
      <style>
       .col { 
        background: #f0f0f0; /* Цвет фона */
        width: 230px; /* Ширина блока */
        padding: 10px; /* Поля */
        font-size: 1.5em; /* Размер шрифта */
        word-wrap: break-word; /* Перенос слов */ 
       }
      </style>
     </head>
     <body> 
      <div>
       <p>Cуществительное</p>
       <p>высокопревосходительство</p>
       <p>Одушевленное существительное</p>
       <p>одиннадцатиклассница</p>
       <p>Химическое вещество</p>
       <p>метоксихлордиэтиламинометилбутиламиноакридин</p>
      </div>
     </body>
    </html>

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

    Рис. 1. Перенос длинных слов

    Добавить комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *