Переполнение длинным словом

Возможно, я что-то уже подзабыл из курсов, но сегодня, пытаясь решить один вопрос в песочнице, вдруг увидел загвоздку: вот, например, имеем прямоугольный блок с 1 словом по центру (пусть это будет кнопка). Ей задана фиксированная ширина и минимальная высота. Допустим, в названии кнопки добавилось ещё одно слово - нет проблем: если слово не влезет в одну строку, оно перенесётся вниз, т.к. высота вниз у нас не фиксирована. И так до бесконечности (гипотетически) - т.е. кнопка превратится из горизонтальной в вертикальную. А вот если увеличится длина изначального слова (ну, пусть это будет ооочень длинное слово, например, хим. вещество - циклопентанпергидрофенантрен), даже если оно одно, никаких переносов вниз не будет и это слово просто вылезет за пределы своего блока-контейнера. Почитал курс про оформление текстов в платном разделе: там, как я понял, можно применить text-overflow: ellipsis, если задать блоку overflow: hidden. Однако оно просто срежет часть, которая вылезла, поставит многоточие - мол, “продолжение следует”. Но увидеть оставшуюся часть слова можно будет только в том случае, если задать блоку overflow: scroll - тогда появятся полосы прокрутки. Но, естественно, вид кнопки сильно пострадает. Можно ли как-то легко решить данный вопрос: заставить это длинное слово переноситься (без использования pre в html)?

word-wrap: break-word. - разрешает разрывать строки прямо внутри слов.

1 лайк

Спасибо за напоминание! :slight_smile: Да, было такое в уроках.