ГЛАВНАЯ | HTML | CSS | PHP | JS | ЕЩЁ |

Текст выходит за края блока как обрезать спрятать

2019/09/02 Марат 48 0 HTML | CSS |

Текст выходит за края блока - как сделать, чтобы текст на выходил за края блока, дива(div), нужно просто обрезать данный текст на ширину блока.

Иногда встречаются совсем простые задачи, которые очень сложно решают множество людей! И в данном случае идет речь о тексте, который вырывается наружу из-за границ, краев блока. Блок в данном случае не важно - это может быть див(div), таблица, любой тег, который имеет ширину.

Нам просто нужно отрезать текст, который находится за краями нашего блока. И будем делать данное обрезание с помощью "CSS"

Для иллюстрации процесса обрезки текста по ширине блока - нам понадобится пример!

Пример - это div. Ему припишем некоторый класс, в котором вынужденно пропишем свойство - white-space: nowrap; - чтобы строка не переносилась на новую строку при заполнении(это сделано в данном случае, для того, чтобы отключить те стили, которые прописаны для всего нашего сайта...).

Добавим max-width - чтобы div не растягивался.

+ нам нужно это все сделать - добавим бордюр() красного цвета -

Итого получим:

.example {

max-width: 300px;

border: 1px solid red ;

white-space: nowrap;

}

Далее нам понадобится div с этим классом:

<div class="example">В див поместим текст, который будет выходить за края нашего дива – не растягивая его!</div>
Результат :

Как видим... наш текст прекрасно вылез за края того блока. в котром он написан! И мало того, он умудрился вылезти еще и за края основного текстового поля

В див поместим текст, который будет выходить за края нашего дива – не растягивая его!

Как сделать так, чтобы данный текст не вылезал за края блока.

Для того, чтобы ваш текст не вылезал за края блока- можно воспользоваться … двумя способами – это сделать перенос строки в том случае, когда длина текста будет превышать ширину блока.

Вариант №1.

Для того, чтобы продемонстрировать перенос строки, мы создадим новый стиль, и к верхнему примеру добавим свойство : white-space: normal;

<style>.example.yes_wrap {white-space: normal; }</style>

<div class="example yes_wrap">В див поместим текст, который будет выходить за края нашего дива – не растягивая его!</div>

Результат:
В див поместим текст, который будет выходить за края нашего дива – не растягивая его!

Вариант №1.

Но если нам требуется оставить высоту блока такой-же и нам не нужен перенос строки!?

Как в данном случае предотвратить вылезание текста за пределы блока!?

Мы просто его обрежем!

Опять же возьмем верхний пример и добавим свойство overflow: hidden;

<style>.example.yes_cut{ overflow: hidden }</style>

<div class="example yes_cut">В див поместим текст, который будет выходить за края нашего дива – не растягивая его!</div>

Результат:
В див поместим текст, который будет выходить за края нашего дива – не растягивая его!
Не забудь !
Оставить комментарийCOMMENTS+
Сообщений пока нет - Вы можете стать первым
BBcode
нажмите, чтобы загрузить аватар
Загрузить свой аватар(max ширина, высота = 100px) ( как это работает)

Закрыть
+=
Подписаться
Теги:
Текст выходит за края блока как обрезать спрятать

НАШИ ПРОЕКТЫ : Проекты находятся в разной степени готовности (просто их столько, что времени не хватает…) Все статьи авторские, при копироавании активная ссылка обязательна DwWeb.ru! © 2015 - 2019