Переполнение элемента

Классы

Описание

Модификатор управляет поведением объекта при переполнении.

Использование: {условие действия}:{модификатор}

• Условие действия. Необязательный параметр. Определяет условие действия модификатора. Может принимать значения:
• sm — для экранов small и больше.
• md — для экранов medium и больше.
• lg — для экранов large и больше.
• xl — для экранов extra large и больше.
• Модификатор. Обязательный параметр.
  • overflow-auto — поведение определяется браузером автоматически
  • overflow-hidden — контент обрезается, без предоставления прокрутки
  • overflow-visible — содержимое не обрезается, может отображаться снаружи блока, в котором оно расположено
  • overflow-scroll — содержимое обрезается и браузер использует элементы прокрутки, не важно было ли обрезано содержимое или нет
  • overflow-x-auto — по оси X поведение определяется браузером автоматически
  • overflow-y-auto — по оси Y поведение определяется браузером автоматически
  • overflow-x-hidden — по оси X контент обрезается, без предоставления прокрутки
  • overflow-y-hidden — по оси Y контент обрезается, без предоставления прокрутки
  • overflow-x-visible — по оси X содержимое не обрезается, может отображаться снаружи блока, в котором оно расположено
  • overflow-y-visible — по оси Y содержимое не обрезается, может отображаться снаружи блока, в котором оно расположено
  • overflow-x-scroll — по оси X содержимое обрезается и браузер использует элементы прокрутки, не важно было ли обрезано содержимое или нет
  • overflow-y-scroll — по оси Y содержимое обрезается и браузер использует элементы прокрутки, не важно было ли обрезано содержимое или нет

Примеры

overflow-auto

С помощью модификатора overflow-auto поведение определяется браузером автоматически

<div class="h-d5 overflow-auto ... ">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.        
</div>

overflow-hidden

С помощью модификатора overflow-hidden контент обрезается, без предоставления прокрутки

<div class="h-d5 overflow-hidden ... ">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.        
</div>

overflow-visible

С помощью модификатора overflow-visible содержимое не обрезается, может отображаться снаружи блока, в котором оно расположено

<div class="h-d5 overflow-visible ... ">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.        
</div>

overflow-scroll

С помощью модификатора overflow-scroll содержимое обрезается и браузер использует элементы прокрутки, не важно было ли обрезано содержимое или нет

<div class="h-d5 overflow-scroll ... ">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.        
</div>

overflow-x-auto

С помощью модификатора overflow-x-auto по оси X поведение определяется браузером автоматически

<div class="h-d5 overflow-x-auto ... ">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.        
</div>

overflow-y-auto

С помощью модификатора overflow-y-auto по оси Y поведение определяется браузером автоматически

<div class="h-d5 overflow-y-auto ... ">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.        
</div>

overflow-x-hidden

С помощью модификатора overflow-x-hidden по оси X контент обрезается, без предоставления прокрутки

<div class="h-d5 overflow-x-hidden ... ">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.        
</div>

overflow-y-hidden

С помощью модификатора overflow-y-hidden по оси Y контент обрезается, без предоставления прокрутки

<div class="h-d5 overflow-y-hidden ... ">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.        
</div>

overflow-x-visible

С помощью модификатора overflow-x-visible по оси X содержимое не обрезается, может отображаться снаружи блока, в котором оно расположено

<div class="h-d5 overflow-x-visible ... ">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.        
</div>

overflow-y-visible

С помощью модификатора overflow-y-visible по оси Y содержимое не обрезается, может отображаться снаружи блока, в котором оно расположено

<div class="h-d5 overflow-y-visible ... ">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.        
</div>

overflow-x-scroll

С помощью модификатора overflow-x-scroll по оси X содержимое обрезается и браузер использует элементы прокрутки, не важно было ли обрезано содержимое или нет

<div class="h-d5 overflow-x-scroll ... ">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.        
</div>

overflow-y-scroll

С помощью модификатора overflow-y-scroll по оси Y содержимое обрезается и браузер использует элементы прокрутки, не важно было ли обрезано содержимое или нет

<div class="h-d5 overflow-y-scroll ... ">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.        
</div>

Адаптивность

Для управления поведением объекта при переполнении, начиная с определенного размера области просмотра, добавьте префикс контрольной точки ( sm, md, lg, xl ) через двоеточие (:) к модификатору.

Например, воспользуйтесь модификатором md:overflow-hidden для обрезки контента без прокрутки для экранов размером Medium и больше.

<div class="md:overflow-hidden"></div>

Для получения дополнительной информации об адаптивности ознакомьтесь с документацией.

Изменить статью