Логотип Хекслета
/
Вопросы и ответы
/
CSS
/

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

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

4 года назад

Человек-Молекула

Присоединяйтесь к нашему Telegram-сообществу

Ответы

0

Иногда возникает ситуация, когда какой-то текст или слово не помещается в блоке и нужно перенести его на следующую строку.

long_text

Чтобы поправить ситуацию можно пойти разными путями. Например с помощью специального символа ­ вручную установить перенос там где требуется.

д____л____и__­__н____н____о____е

Или например с помощью CSS свойства word-break - управляет переносом длинных слов (normal - не переносить, если перенос не задан явно, break-all - принудительно переносить, keep-all - не переносить, даже если слово содержит дефис).

Например:

div class="long-text">
  Напишем тут очень д____л____и____н____н____о____е слово
 которое по идее должно перенестись на след строку.
</div>

Добавим стили:

.long-text {
  border: 1px solid #245488;
  padding: 10px;
  width: 170px;
  word-break: break-all;
}

Результат: long_text_break

3 года назад

Вячеслав Межуревский

1 месяц

Позиционирование в CSS

Навык разработки адаптивных интерфейсов, позволяющий создавать удобные и функциональные решения для различных устройств

5 месяцев

Профессиональная верстка

Навык адаптивной вёрстки с современными подходами для корректного отображения сайтов на любых устройствах и разрешениях

10 месяцев

Фронтенд-разработчик

Верстка на HTML5 и CSS3, Программирование на JavaScript в браузере, разработка клиентских приложений используя React

1 месяц

Основы веб-разработки

Основы HTML, CSS, блочная модель, основы Javascript, синтаксис, арифметика, условия, циклы, функции, поиск ошибок

1 месяц

SASS

Навык работы с препроцессором SASS для эффективной и структурированной стилизации веб-приложений

Похожие вопросы