Перенос длинных слов на новую строку
27.02.2020 07:22:27 am
На моем сайте, главной странице для авторизованного пользователя, в блоке "Темы" длинные слова уходили за границу блока. Например, слово "SYSTEM_THREAD_EXCEPTION_NOT_HANDLED" из заголовка темы: Синий экран смерти "SYSTEM_THREAD_EXCEPTION_NOT_HANDLED" Windows 10 отображалось не полностью, так как не помещается по ширине блока. Я решил, что данную проблему надо решать при помощи CSS.
Первое свойство, что я попробовал применить к заголовку было white-space. Данное свойство устанавливает, как следует отображать пробелы между словами. Значение применял pre-wrap. Но это свойство мне не подошло, так как это частичная имитация тега
Следующее, что я применил было свойство overflow-wrap, со значением break-word:
Это было верное решение. Его я и оставил.
Что делает данное свойство, думаю, объяснять не надо, но на всякий случай я это сделаю:
Свойство overflow-wrap - осуществляет переносы букв длинного слова, если слово не помещается в заданную область / блок. Значение break-word - разделяет длинные слова, чтобы они могли поместиться в строку.
Первое свойство, что я попробовал применить к заголовку было white-space. Данное свойство устанавливает, как следует отображать пробелы между словами. Значение применял pre-wrap. Но это свойство мне не подошло, так как это частичная имитация тега
<pre>.Следующее, что я применил было свойство overflow-wrap, со значением break-word:
overflow-wrap: break-word;Это было верное решение. Его я и оставил.
Что делает данное свойство, думаю, объяснять не надо, но на всякий случай я это сделаю:
Свойство overflow-wrap - осуществляет переносы букв длинного слова, если слово не помещается в заданную область / блок. Значение break-word - разделяет длинные слова, чтобы они могли поместиться в строку.
- Жалоба
