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

Автоматический перенос строк в браузере

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

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

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

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

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

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

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

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

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

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

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

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

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

Однако браузер Chrome не поддерживал значение

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

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

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <title>Example</title>
   <style>
      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 {
         -webkit-hyphens: auto;
         -ms-hyphens: auto;
         hyphens: auto;
      }
   </style>
</head>
<body>
   <dl>
      <dt>none: без переносов</dt>
      <dd lang="ru">Электрофи&shy;кация всей страны</dd>
      <dt>manual: перенос только с помощью &amp;shy;</dt>
      <dd lang="ru">Электрофи&shy;кация всей страны</dd>
      <dt>auto: автоматический перенос</dt>
      <dd lang="ru">Электрофи&shy;кация всей страны</dd>
   </dl>
</body>
</html>

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

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

Для организации принудительного переноса слова или перехода на новую строку в HTML используется одиночный тег

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

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

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

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

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

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

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

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

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

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

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

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

Для предотвращения разрыва таких слов и символов в тексте можно использовать, например, ссылку на символ &nbsp; («неразрывный пробел»), вставляя её между словами вместо обычного пробела.

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

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

<p>Тургенев&nbsp;И.С.&nbsp;&mdash; русский писатель
   второй половины XIX&nbsp;века.</p>

До недавнего времени некоторые веб-разработчики для формирования неразрывных строк использовали также нестандартный парный тег <nobr>

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

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

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

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

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

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

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <style>
      .nbr {white-space: nowrap;}
   </style>
</head>
<body>
   <p><span>Lorem ipsum dolor sit
   amet, consectetuer adipiscing elit, sed diem
   nonummy nibh euismod tincidunt ut lacreet
   dolore magna aliguam erat volutpat.</span>
   Ut wisis enim ad minim veniam, quis nostrud
   exerci tution ullamcorper suscipit lobortis
   nisl ut aliquip ex ea commodo consequat.
 
 </p>
</body>
</html>

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

<wbr>.

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

  • Об использовании кавычек и тире в текстовом содержимом элементов
  • Ссылки на символы
  • Список наиболее часто используемых ссылок на символы
  • Списки на веб-страницах
  • Оформление цитат на веб-странице
  • Стилизация текста средствами CSS

OnLine Hyphenation. Автоматический перенос слов в тексте и в html страницах

OnLine Hyphenation. Автоматический перенос слов в тексте и в html страницах
Добавить RSS ленту | Новый поиск | О нас

  
 OnLine Hyphenator. Автоматический перенос слов 
  
 

Вы когда-нибудь обращали внимание на то, что практически на всех сайтах в тексте отсутствуют переносы и из-за этого статьи, новости и другой контент выглядят не строгой симпатичной колонкой, а неровным блоком c кривым правым краем?

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

 Вы хотели бы использовать эту систему в вашей cms? Свяжитесь с нами! [email protected]
Символ переноса : Язык : Тип текста : Выравнивание текста :
CzechDutchEnglishFrenchGermanPolishRussian
 ТекстHTML Не изменятьПо левому краюПо центруПо правому краюПо ширине
 

 Вставьте ваш текст в поле ввода, нажимте на кнопку «Генерировать текст»

 
Текст для обработки
         
 
 

 Расставить переносы на вашем сайте / Демо-режим

Посмотрите, как может выглядеть ваша статья на сайте или запись в блоге с правильно расставленными переносами!
Вставьте URL вашего сайта в поле, нажмите на «Hyphenate URL» и вы получите результат.
 
Введите URL сайта для демонстрации
         
 
  
  

Свойство переноса слов в CSS

❮ Назад Полное руководство по CSS Далее ❯


Пример

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

div {
  word-wrap: break-word;
}

Попробуйте сами »

Определение и использование

Свойство word-wrap позволяет разбивать и переносить длинные слова на следующую строку.

Показать демо ❯

Значение по умолчанию: обычный
Унаследовано: да
Анимация: нет. Читать о анимированном
Версия: CSS3
Синтаксис JavaScript: объект .style.wordWrap=»break-word» Попробуй

Поддержка браузера

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

Собственность
перенос слов 4,0 5,5 3,5 3.1 10,5

Синтаксис CSS

word-wrap: normal|break-word|initial|inherit;

Значения свойств

Значение Описание Демонстрация
обычный Разрыв слов только в разрешенных точках останова. Это по умолчанию Демонстрация ❯
ключевое слово Позволяет разбивать неразрывные слова Демонстрация ❯
начальный Устанавливает для этого свойства значение по умолчанию. Читать про начальный
унаследовать Наследует это свойство от родительского элемента. Читать о наследовать

Связанные страницы

Учебник CSS: Текстовые эффекты CSS

❮ Предыдущая Полное руководство по CSS Следующий ❯


ВЫБОР ЦВЕТА

Лучшие учебники
Учебное пособие по HTML
Учебное пособие по CSS
Учебное пособие по JavaScript
Учебное пособие
Учебное пособие по SQL
Учебное пособие по Python
Учебное пособие по W3.CSS
Учебное пособие по Bootstrap
Учебное пособие по PHP
Учебное пособие по Java
Учебное пособие по C++
Учебник по jQuery

Основные ссылки
HTML Reference
CSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3. CSS Reference
Bootstrap Reference
PHP Reference
HTML Colors
Java Reference
Angular Reference
jQuery Reference

901 55 лучших примеров Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры How To
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

FORUM | О

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

Copyright 1999-2023 Refsnes Data. Все права защищены.
W3Schools работает на основе W3.CSS.

Разница между жесткой и мягкой пленкой?

спросил

Изменено 5 месяцев назад

Просмотрено 57 тысяч раз

Я пишу текстовый редактор. Посмотрев на другие текстовые редакторы, я заметил, что некоторые из них относятся к «мягкой» и «жесткой» обертке. В чем разница? Я не могу найти ответ поиском.

  • word-wrap

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

0

Текстовые редакторы обычно автоматически переносят текст в абзацы с жесткими символами новой строки, но реже текст перетекает в красивый абзац, если вы вернетесь позже и редактируете/добавляете/удаляете слова позже. (Вы можете сделать это вручную в emacs с помощью M-q.)

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

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

No related posts.