Това описание ще илюстрира:
Как да използвам „overflow-auto“ в Tailwind?
„ преливане-авт ” клас автоматично добавя ленти за превъртане, когато съдържанието прелива. Не показва лентата за превъртане, ако съдържанието не прелива. За да използвате „overflow-auto“ в Tailwind, направете HTML програма и добавете „ преливане-авт ” помощен клас към желания елемент в HTML програмата.
Синтаксис
< елемент клас = 'препълване-автоматично ...' > ... елемент >
Пример
В този пример ще приложим „препълване-автоматично“ полезност за
контейнер: < тяло >
< див клас = 'overflow-auto bg-purple-300 p-4 mx-16 mt-5 h-32 text-justify' >
Tailwind CSS предоставя различни помощни програми за „препълване“, като „overflow-auto“, „overflow-scroll“, „overflow-hidden“, „overflow-visible“ и т.н. Тези помощни програми определят как конкретен елемент обработва съдържанието, което надхвърля контейнера размер. Всяка помощна програма предлага уникална функционалност, но крайната им цел остава същата, т.е. да контролира поведението на препълване на избрания елемент.
< / див >
< / тяло >
- „препълване-автоматично“ клас се използва за добавяне на ленти за превъртане към контейнер и ги показват само когато е необходимо превъртане.
- “bg-purple-300” клас задава лилавия цвят на цвета на фона на контейнера.
- 'p-4' клас задава 4 единици подложка от всички страни на контейнера.
- 'mx-16' клас прилага 16-те единици марж върху оста x на контейнера.
- 'mt-5' клас прилага 5-те единици марж към горната част на контейнера.
- „h-32“ клас задава височината на контейнера на 32 единици.
- „обосноваване на текст“ клас оправдава текста на съдържанието вътре в контейнера.
Изход
Горният изход показва вертикална лента за превъртане, когато текстът прелива. Това показва, че „препълване-автоматично“ помощната програма е приложена успешно към елемента.
Как да използвам „overflow-scroll“ в Tailwind?
Тази помощна програма добавя лентите за превъртане към контейнера и винаги ги показва, дори ако превъртането не е необходимо. Освен това позволява превъртане във всички посоки. За да използвате „overflow-scroll“ в Tailwind, направете HTML програма и добавете „преливане-превъртане“ полезен клас към конкретния елемент в HTML програмата.
Синтаксис
< елемент клас = 'преливане-превъртане ...' > ... елемент > Пример
В този пример ще приложим „преливане-превъртане“ полезност за
< див клас = 'overflow-scroll bg-purple-300 p-4 mx-16 mt-5 h-32 text-justify' >
Tailwind CSS предоставя различни помощни програми за „препълване“, като „overflow-auto“, „overflow-scroll“, „overflow-hidden“, „overflow-visible“ и т.н. Тези помощни програми определят как конкретен елемент обработва съдържанието, което надхвърля контейнера размер. Всяка помощна програма предлага уникална функционалност, но крайната им цел остава същата, т.е. да контролира поведението на препълване на избрания елемент.
< / див >
< / тяло >
Ето, „преливане-превъртане“ клас се използва за добавяне на ленти за превъртане към
контейнер и винаги ги показва.Изход
В горния резултат могат да се видят както вертикални, така и хоризонтални ленти за превъртане. Това показва, че „преливане-превъртане“ помощната програма е приложена успешно към елемента.
Заключение
За да използвате „overflow-auto“ и „overflow-scroll“ в Tailwind, е необходимо да добавите „препълване-автоматично“ и „преливане-превъртане“ помощни класове към желаните елементи в HTML програмата. И двата класа помощни програми добавят ленти за превъртане към посочените елементи. Класът „overflow-auto“ обаче показва ленти за превъртане само когато е необходимо превъртане, докато класът „overflow-scroll“ винаги ги показва, дори ако превъртането не е необходимо. Това описание илюстрира методите за използване на „overflow-auto“ и „overflow-scroll“ в Tailwind.