Как сделать перенос слов в ВК

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

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

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

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

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

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

Как перейти на новую строку в контакте

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

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

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

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

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

А. Блок< br >
Ночь, улица, фонарь, аптека,< br >
Бессмысленный и тусклый свет.< br >
Живи еще хоть четверть века —< br >
Все будет так. Исхода нет.< br >< br >
Умрешь — начнешь опять сначала< br >
И повторится все, как встарь:< br >
Ночь, ледяная рябь канала,< br >
Аптека, улица, фонарь.

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

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

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

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

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

Сервис VK video transfer – перенос видео с ютуба в ВК

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

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

margin-top : 40 px ;

Бонус — br clear

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

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

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

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

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

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

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

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

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

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

• тег

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

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

Источник: blogwork.ru

Как реализуется перенос текста CSS?

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

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

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

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

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

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

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

  

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

  wbr

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

  

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

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

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

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

  

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

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

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

  .container < background-color: rgb(204,204,204); padding:10px; width:200px; >.content

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

  

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

  

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

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

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

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

  .content

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

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

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

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

  

  hyphens – новое свойство, которое появилось с выходом CSS3 . Оно устанавливает, как браузер будет осуществлять перенос слов в выводимом тексте. Свойство принимает несколько значений:

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

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

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

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

  .container < background-color: rgb(153,255,204); padding:10px; width:200px; >.content

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

  

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

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

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

  .container < background-color: rgb(153,255,204); padding:10px; width:200px; >.content < -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; >.nowrap

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

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

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

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

  

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

  Источник: www.internet-technologies.ru

  О переносах и запрете переноса строк в текстовом содержимом элементов

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

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

  Организация переноса частей слов

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

  Перенос части слова, организованный с помощью символа «дефис» принято называть явным. Кроме явного переноса, в HTML существует также мягкий перенос, для организации которого используется ссылка на символ ­ (сокр. от англ. soft hyphen ) или . Это непечатный символ и на экран он не выводится, но в случае переноса последующей части слова на новую строку, в верхней строке после оставшейся части слова браузер выводит символ «дефис», что будет выглядеть естественно. Для правильной организации таких переносов необходимо разделить ссылками ­ слоги всех слов, которые предположительно могут попасть на конец строки и не убраться целиком на экране при различном разрешении и масштабе. Дело это конечно хлопотное и требует затрат времени, но иногда игра стоит свеч.

  Пример организации мягкого переноса:

  Этот текст можно раз­ры­вать в ука­зан­ных мес­тах.

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

  Установка способа организации переносов средствами CSS

  Способ организации переносов частей слов в блочных элементах определяется стилевым свойством hyphens , появившемся в стандарте CSS3. В качестве значений данного свойства могут использоваться ключевые слова:

  • none — слова не переносятся, даже при наличии в тексте ссылок на символ ­ ;
  • manual — переносы происходят только в точках, отмеченных с помощью ссылки на символ ­ или тега ;
  • auto — браузер будет автоматически добавлять переносы слов на основе встроенного словаря переносов. Язык используемого словаря должен быть установлен с помощью универсального атрибута lang в открывающем теге или в открывающем теге конкретного блочного элемента (например, абзаца). При данном способе учитываются также возможные точки переноса, отмеченные с помощью ссылки на символ ­ и тега ;
  • inherit — способ организации переносов будет унаследован от родительского элемента.

  Примечание: Свойство hyphens было стандартизировано только в CSS3, а потому может не поддерживаться некоторыми браузерами. Ранее производителями некоторых браузеров были введены нестандартные свойства, которые и использовались веб-разработчиками:

  -ms-hyphens — для Internet Explorer
  -webkit-hyphens — для Chrome, Safari, Androis и iOS
  -moz-hyphens — для Firefox

  Однако браузер Chrome не поддерживал значение auto , поэтому автоматические переносы слов в нём не работали и не работают до сих пор.

  Пример использования свойства hyphens :

  charset=»utf-8″> Example dd < width: 55px; border: 1px solid black; >dd.none < -webkit-hyphens: none; -ms-hyphens: none; hyphens: none; >dd.manual < -webkit-hyphens: manual; -ms-hyphens: manual; hyphens: manual; >dd.auto none: без переносов lang=»ru» class=»none»>Электрофи­кация всей страны manual: перенос только с помощью lang=»ru» class=»manual»>Электрофи­кация всей страны auto: автоматический перенос lang=»ru» class=»auto»>Электрофи­кация всей страны

  Результат в браузере:

  Принудительный перенос строк

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

  Пример организации принудительного переноса:

  А. Блок
  Осенний вечер так печален; Смежает очи тающий закат… Леса в безмолвии холодном спят Над тусклым золотом прогалин.

  Результат выполнения данного кода в браузере:

  Организация переносов в неразрывных строках

  Для указания места возможного переноса в длинных неразрывных строках (например, в URL) предназначен одиночный тег (сокр. от англ. word break — «разрыв слова»). Данный тег отличается от тега
  тем, что в месте расположения тега
  браузер обязательно выполняет перенос содержимого на новую строку, а встретив в коде элемент , браузер сначала анализирует ситуацию и выполняет перенос строки только по необходимости, если этого требует ширина родительского элемента.

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

  Пример использования тега в неразрывных строках:

  https://web.archive.org /web /20121105170226 /styleguide /ask /capitalization /should-website-section-titles-be-capitalized-or-quotes

  Результат выполнения данного кода в браузере:

  О запрете переноса слов

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

  Для предотвращения разрыва таких слов и символов в тексте можно использовать, например, ссылку на символ   («неразрывный пробел»), вставляя её между словами вместо обычного пробела. Такая конструкция будет восприниматься браузером как единое слово и разрываться не будет. Главным недостатком этого способа борьбы за целостность является плохая читабельность исходного текста документа. В таком сплошном тексте очень сложно ориентироваться при редактировании.

  Пример организации неразрывного текста с помощью «неразрывного пробела»:

  Тургенев И.С. — русский писатель второй половины XIX века.

  До недавнего времени некоторые веб-разработчики для формирования неразрывных строк использовали также нестандартный парный тег (сокр. от англ. no-break — «без разрыва»). Текст, помещённый внутрь такого элемента, становится неразрывным и выводится в одной строке.

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

  Пример использования тега :

  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

  Результат в браузере:

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

  С использованием средств CSS вышеприведённый пример будет выглядеть следующим образом:

  charset=»utf-8″> .nbr

  class=»nbr»>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

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

  Другие статьи по схожей тематике

  • Об использовании кавычек и тире в текстовом содержимом элементов
  • Ссылки на символы
  • Список наиболее часто используемых ссылок на символы
  • Списки на веб-страницах
  • Оформление цитат на веб-странице
  • Стилизация текста средствами CSS
  • Блочные элементы и их форматирование
  • О настройке Wireless-N Mini Router WS-WN523N2
  • Настройка АРМ для работы с ЭЦП на сайте ФНС
  • Объекты метаданных компоненты «Расчет»
  • Объекты метаданных компоненты «Оперативный учет»

  Источник: webbrat.ru