мое новое расписание: пн-пт с 8.00 по 16.00 по москве, сб и вс - выходные; после 16.00 и на вых. отвечаю по возможности

Тег wbr

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

Не требует закрывающего тега.

При переносе слова через тег wbr символ переноса "-" не добавляется. Если он вам нужен - используйте символ мягкого переноса ­ (точка с запятой в конце обязательна, это не опечатка).

Мягкий перенос ­ указывает браузеру место, где он может сделать перенос слова (в случае необходимости), поставив при этом символ переноса "-".

Мягкие переносы ­ не будут работать, если свойство hyphens задано в значении none (а переносы wbr будут).

Пример . Текст без переносов

Давайте посомтрим на образец текста, в котором есть длинные слова, которые вылезают за границу блока. Блоку зададим маленькую ширину так, чтобы большое слово в нем не поместилось:

<div id="elem"> это суперпупердлинныйпредлинный текст </div> #elem { width: 200px; border: 1px solid black; }

:

Пример . Тег wbr

А здесь, давайте добавим тег wbr в местах, где мы рекомендуем браузеру сделать перенос слова в случае необходимости (обратите внимание на то, что браузер сделает переносы не везде, где мы указали):

<div id="elem"> это супер<wbr>пупер<wbr>длинный<wbr>предлинный текст </div> #elem { width: 200px; border: 1px solid black; }

:

Пример . Символ &shy;

Давайте попробуем вместо тега wbr поставить символ &shy;. В местах переноса будут отображаться дефисы:

<div id="elem"> это супер­пупер­длинный­предлинный текст </div> #elem { width: 200px; border: 1px solid black; }

:

Смотрите также

  • тег br,
    который делает перенос на новую строку
  • свойство hyphens,
    которое задает настоящие переносы слов
  • свойства word-break и overflow-wrap,
    которые позволяют перенести буквы длинного слова
  • свойство overflow,
    которое обрезает вылезающие за границу блока части