Содержание

Укрощаем длинный текст средствами HTML и CSS — Блог

Укрощаем длинный текст средствами HTML и CSS

8 января 2019 0 Александра Пирс

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

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

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

Немного иначе ведут себя flexbox элементы и таблицы, они игнорируют установленную ширину и всегда растягиваются настолько, чтобы вместить текст целиком. В примере ниже flex-контейнеру было задано ограничение по ширине (width: 300px;), однако видно, что в зависимости от контента блок может занимать больше места. Не самая приятная особенность для верстальщика, уверенного, что в его макете всё рассчитано до пикселя.

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

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

Указать браузеру, в каких местах слово может быть разбито переносом можно с помощью символа мягкого разрыва (­).

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

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

<html>
  <head>
    <style>
      .card {
        width: 200px;
        height: 250px;
        background: #7cd4ae;
        padding: 10px;
        display: inline-block;
        margin: 2em;
      }
    </style>
  </head>
  <body>
    <div>
      <img src="troll.jpg">
      Двухсот&shy;восьмидесяти&shy;восьми&shy;киллограммовый тролль
    </div>
    <div>
      <img src="troll.jpg">
      Двухсот<wbr/>восьмидесяти<wbr/>восьми<wbr/>киллограммовый тролль
    </div>
  </body>
</html>

 

 

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

В CSS есть несколько свойств, влияющих на перенос текста.

  • overflow-wrap (word-wrap) — управляет переносом длинных слов (normal — не переносить, если перенос не задан явно, break-word — принудительно переносить).
  • word-break — управляет переносом длинных слов (normal — не переносить, если перенос не задан явно, break-all — принудительно переносить, keep-all — не переносить, даже если слово содержит дефис).
  • hyphens — автоматический перенос слов, основанный на встроенном в браузер словаре переносов (none — не переносить, auto — переносить длинные слова).

Название word-wrap является устаревшим, но сохраняется для совместимости со старыми версиями браузеров.

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

Свойство hyphens является наиболее мощным и удобным, но его поддержка браузерами пока не идеальна. Плюс оно требует обязательного указания языка в атрибуте lang тега (например, lang=»ru»).

<html>
  <head>
    <style>
      .description {
        width: 100px;
        background: #7cd4ae;
        word-wrap: break-word;
        word-break: break-all; /* более приоритетно */
      }
    </style>
  </head>
  <body>
    <div lang="ru">
      Верховный суд Лос-Анджелеса решит судьбу огромнейшего трёхсотвосьмидесятикилограммового изумруда
    </div>
  </body>
</html>

 

Перенос слов в тексте html, css

Задать вопрос

Вопрос задан

Изменён 4 года 8 месяцев назад

Просмотрен 17k раз

Есть текст в <pre> теге. Слова в тексте не переносятся, а режутся. Я пытаюсь сделать так, чтобы слова переносились целиком, а не по частям. Например, текст «пылесосный пылесосательный пылесос» должен вывести всего первых два слова, а последнее перенести. Вместо этого выходить что-то типа «пылесосный пылесосательный пыл <перенос> есос».

Вот код, который не делает, что мне надо :С

<pre> </pre>
  • html
  • css
  • css3

5

По умолчанию именно так и работает — перенос по словам.
Если по какой-то причине происходит разрыв слова, то дело в word-break.
Помимо этого, исправить можно одним из следующих способов:

pre {
  white-space: pre-wrap;
  overflow: auto;
  border: 1px dotted red;
  width: 32ch;
  float: left;
  margin: .5em;
  min-height: 7em;
}

.break {
  word-break: break-all;
}

.cancel {
  word-break: break-word;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.
 
 to-normal {
  word-break: normal;
  word-wrap: normal;
  overflow-wrap: normal;
}

pre:before {
  content: attr(class) "\A0\A";
  color: blue;
}
<pre>пылесосный пылесосательный пылесос
1234567890123456789012345678901234567890</pre>

<pre>пылесосный пылесосательный пылесос
1234567890123456789012345678901234567890</pre>

<pre>пылесосный пылесосательный пылесос
1234567890123456789012345678901234567890</pre>

<pre>пылесосный пылесосательный пылесос
1234567890123456789012345678901234567890</pre>

2

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Свойство переноса слов в 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 Далее ❯


НОВИНКА

Мы только что запустили
Видео W3Schools

Узнать

ВЫБОР ЦВЕТА
КОД ИГРЫ

Играть в игру

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

Лучшие ссылки
Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery

Лучшие примеры
0163 Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

FORUM | О

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

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

Свойство разделения слов CSS

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


Пример

Разрыв слов на любом символе:

в год {
  word-break: break-all;
}

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

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

Свойство word-break указывает, как слова должен прерываться при достижении конца строки.

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

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

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

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

Собственность
разрыв слова 4,0 5,5 15,0 3.1 15,0

Синтаксис CSS

word-break: normal|break-all|keep-all|break-word|initial|inherit;

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

Значение Описание Демо
обычный Значение по умолчанию. Использует правила разрыва строки по умолчанию
универсальный Во избежание переполнения слово может быть разбито на любом символе Демонстрация ❯
хранить все Разрывы слов не следует использовать для текста на китайском, японском и корейском языках (CJK). Поведение текста, отличного от CJK, такое же, как и при значении «нормальное» Демонстрация ❯
ключевое слово Во избежание переполнения слово может быть разбито в произвольных точках Демонстрация ❯
начальный Устанавливает для этого свойства значение по умолчанию. Читать про начальный
унаследовать Наследует это свойство от родительского элемента. Читать о унаследовать

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


НОВИНКА

Мы только что запустили
Видео W3Schools

Узнать

ВЫБОР ЦВЕТА
КОД ИГРЫ

Играть в игру

Top Tutorials
Учебное пособие по 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


1 Top3 Examples Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

FORUM | О

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

No related posts.