Hur använder man 'break-efter' med brytpunkter och mediefrågor i medvind?

Den här artikeln kommer att demonstrera metoden för att använda 'break-after' med brytpunkter och mediefrågor i Tailwind CSS.

Hur använder man 'break-efter' med brytpunkter och mediefrågor i medvind?

För att använda en 'break-after' med brytpunkter och mediefrågor, definiera olika värden och stil för olika skärmstorlekar med 'break-after'-verktyget i HTML-programmet. Verifiera sedan resultatet genom att titta på HTML-webbsidan.

Låt oss utforska den praktiska implementeringen:

Steg 1: Använd Breakpoints och Media Queries med 'break-after' Utility
Skapa ett HTML-program och ange olika värden och stil för olika skärmstorlekar med 'break-after'-verktyget. Vi har till exempel använt ' md ' brytpunkt med ' paus-efter-kolumn ' verktyget och ' lg ' brytpunkt med ' paus-efter-undvik ' verktyg:

Här:

• den ' md:paus-efter-kolumn ' klass indikerar att en kolumnbrytning ska ske efter detta specifika

  -element vid ' md ” brytpunkt (medelstor skärmstorlek).

• den ' lg:break-after-avoid ” klass föreslår att elementet ska undvika break-efter vid ” lg ” brytpunkt (stor skärmstorlek).

Steg 2: Verifiera utdata
Kontrollera om brytpunkterna och mediefrågorna har tillämpats genom att titta på HTML-webbsidan:

På ovanstående webbsida har kolumnbrytningen inträffat på det angivna elementet på mellanskärmen, och efterbrottet har undvikits på den stora skärmen.

Slutsats

För att använda 'break-after' med brytpunkter och mediefrågor i Tailwind, skapa först en HTML-fil. Använd sedan brytpunkter och mediefrågor med 'break-after'-verktyget genom att ange olika värden och stil för olika skärmstorlekar. För verifiering, kör HTML-programmet och se webbsidan. Den här artikeln har demonstrerat metoden för att använda 'break-after' med brytpunkter och mediefrågor i Tailwind CSS.