Текст выходит за края блока как обрезать спрятать
Текст выходит за края блока - как сделать, чтобы текст на выходил за края блока, дива(div), нужно просто обрезать данный текст на ширину блока.
Иногда встречаются совсем простые задачи, которые очень сложно решают множество людей! И в данном случае идет речь о тексте, который вырывается наружу из-за границ, краев блока. Блок в данном случае не важно - это может быть див(div), таблица, любой тег, который имеет ширину.
Нам просто нужно отрезать текст, который находится за краями нашего блока. И будем делать данное обрезание с помощью "CSS"
Для иллюстрации процесса обрезки текста по ширине блока - нам понадобится пример!
Добавим max-width - чтобы div не растягивался.
+ нам нужно это все сделать - добавим бордюр() красного цвета -
Итого получим:
.example {
max-width: 300px;
border: 1px solid red ;
white-space: nowrap;
}
Далее нам понадобится div с этим классом:
Как видим... наш текст прекрасно вылез за края того блока. в котром он написан! И мало того, он умудрился вылезти еще и за края основного текстового поля
Как сделать так, чтобы данный текст не вылезал за края блока.
Для того, чтобы ваш текст не вылезал за края блока- можно воспользоваться … двумя способами – это сделать перенос строки в том случае, когда длина текста будет превышать ширину блока.
Для того, чтобы продемонстрировать перенос строки, мы создадим новый стиль, и к верхнему примеру добавим свойство : white-space: normal;
<style>.example.yes_wrap {white-space: normal; }</style>
<div class="example yes_wrap">В див поместим текст, который будет выходить за края нашего дива – не растягивая его!</div>
Но если нам требуется оставить высоту блока такой-же и нам не нужен перенос строки!?
Как в данном случае предотвратить вылезание текста за пределы блока!?
Мы просто его обрежем!
Опять же возьмем верхний пример и добавим свойство overflow: hidden;
<style>.example.yes_cut{ overflow: hidden }</style>
<div class="example yes_cut">В див поместим текст, который будет выходить за края нашего дива – не растягивая его!</div>
Текст выходит за края блока как обрезать спрятать