บทความนี้จะอธิบาย:
วิธีใช้ 'โอเวอร์โฟลว์อัตโนมัติ' ใน Tailwind
“ ล้นอัตโนมัติ ” คลาสจะเพิ่มแถบเลื่อนโดยอัตโนมัติเมื่อเนื้อหาล้น จะไม่แสดงแถบเลื่อนหากเนื้อหาไม่มากเกินไป หากต้องการใช้ 'โอเวอร์โฟลว์อัตโนมัติ' ใน Tailwind ให้สร้างโปรแกรม HTML และเพิ่ม ' ล้นอัตโนมัติ ” คลาสยูทิลิตี้ไปยังองค์ประกอบที่ต้องการในโปรแกรม HTML
ไวยากรณ์
< องค์ประกอบ ระดับ = 'ล้นอัตโนมัติ ... ' > ... องค์ประกอบ >
ตัวอย่าง
ในตัวอย่างนี้ เราจะใช้ “ล้น-อัตโนมัติ” ยูทิลิตี้เพื่อ
คอนเทนเนอร์: < ร่างกาย >
< แผนก ระดับ = 'overflow-auto bg-purple-300 p-4 mx-16 mt-5 h-32 text-justify' >
Tailwind CSS มียูทิลิตี 'โอเวอร์โฟลว์' หลายแบบ เช่น 'โอเวอร์โฟลว์อัตโนมัติ', 'โอเวอร์โฟลว์-สโครล', 'โอเวอร์โฟลว์-ซ่อน', 'โอเวอร์โฟลว์-มองเห็นได้' เป็นต้น ยูทิลิตีเหล่านี้กำหนดวิธีที่องค์ประกอบเฉพาะจัดการกับเนื้อหาที่เกินคอนเทนเนอร์ ขนาด. ยูทิลิตีแต่ละรายการมีฟังก์ชันการทำงานที่ไม่เหมือนใคร อย่างไรก็ตาม เป้าหมายสุดท้ายยังคงเหมือนเดิม นั่นคือ เพื่อควบคุมพฤติกรรมโอเวอร์โฟลว์ขององค์ประกอบที่เลือก
< / แผนก >
< / ร่างกาย >
- “ล้น-อัตโนมัติ” คลาสใช้สำหรับเพิ่มแถบเลื่อนลงใน คอนเทนเนอร์และแสดงเมื่อจำเป็นต้องเลื่อนเท่านั้น
- “bg-สีม่วง-300” class กำหนดสีม่วงเป็นสีพื้นหลังของคอนเทนเนอร์
- “พี-4” คลาสกำหนดช่องว่างภายใน 4 หน่วยในทุกด้านของคอนเทนเนอร์
- “เอ็มเอ็กซ์-16” class ใช้ระยะขอบ 16 หน่วยบนแกน x ของคอนเทนเนอร์
- “เอ็มที-5” คลาสใช้ระยะขอบ 5 หน่วยที่ด้านบนของคอนเทนเนอร์
- “เอช-32” class กำหนดความสูงของคอนเทนเนอร์เป็น 32 หน่วย
- “ปรับข้อความให้เหมาะสม” คลาสปรับข้อความของเนื้อหาภายในคอนเทนเนอร์
เอาต์พุต
เอาต์พุตด้านบนแสดงแถบเลื่อนแนวตั้งเมื่อข้อความล้น สิ่งนี้บ่งชี้ว่า “ล้น-อัตโนมัติ” ยูทิลิตี้ถูกนำไปใช้กับองค์ประกอบสำเร็จแล้ว
วิธีใช้ 'การเลื่อนแบบล้น' ใน Tailwind
ยูทิลิตีนี้เพิ่มแถบเลื่อนลงในคอนเทนเนอร์และแสดงเสมอแม้ว่าจะไม่จำเป็นต้องเลื่อนก็ตาม นอกจากนี้ยังช่วยให้เลื่อนได้ทุกทิศทาง หากต้องการใช้ 'การเลื่อนแบบล้น' ใน Tailwind ให้สร้างโปรแกรม HTML และเพิ่ม “ล้น-เลื่อน” คลาสยูทิลิตี้สำหรับองค์ประกอบเฉพาะในโปรแกรม HTML
ไวยากรณ์
< องค์ประกอบ ระดับ = 'ล้นเลื่อน ... ' > ... องค์ประกอบ > ตัวอย่าง
ในตัวอย่างนี้ เราจะใช้ “ล้น-เลื่อน” ยูทิลิตี้เพื่อ
< แผนก ระดับ = 'การเลื่อนล้น bg-purple-300 p-4 mx-16 mt-5 h-32 text-justify' >
Tailwind CSS มียูทิลิตี 'โอเวอร์โฟลว์' หลายแบบ เช่น 'โอเวอร์โฟลว์อัตโนมัติ', 'โอเวอร์โฟลว์-สโครล', 'โอเวอร์โฟลว์-ซ่อน', 'โอเวอร์โฟลว์-มองเห็นได้' เป็นต้น ยูทิลิตีเหล่านี้กำหนดวิธีที่องค์ประกอบเฉพาะจัดการกับเนื้อหาที่เกินคอนเทนเนอร์ ขนาด. ยูทิลิตีแต่ละรายการมีฟังก์ชันการทำงานที่ไม่เหมือนใคร อย่างไรก็ตาม เป้าหมายสุดท้ายยังคงเหมือนเดิม นั่นคือ เพื่อควบคุมพฤติกรรมโอเวอร์โฟลว์ขององค์ประกอบที่เลือก
< / แผนก >
< / ร่างกาย >
ที่นี่ “ล้น-เลื่อน” คลาสใช้สำหรับเพิ่มแถบเลื่อนลงใน
คอนเทนเนอร์และแสดงให้เห็นเสมอเอาต์พุต
ในเอาต์พุตด้านบน จะเห็นแถบเลื่อนทั้งแนวตั้งและแนวนอน สิ่งนี้บ่งชี้ว่า “ล้น-เลื่อน” ยูทิลิตี้ถูกนำไปใช้กับองค์ประกอบสำเร็จแล้ว
บทสรุป
หากต้องการใช้ 'โอเวอร์โฟลว์อัตโนมัติ' และ 'โอเวอร์โฟลว์-สโครล' ใน Tailwind คุณจะต้องเพิ่ม “ล้น-อัตโนมัติ” และ “ล้น-เลื่อน” คลาสยูทิลิตี้ไปยังองค์ประกอบที่ต้องการในโปรแกรม HTML คลาสยูทิลิตี้ทั้งสองเพิ่มแถบเลื่อนให้กับองค์ประกอบที่ระบุ อย่างไรก็ตาม คลาส 'overflow-auto' จะแสดงแถบเลื่อนเมื่อจำเป็นต้องเลื่อนเท่านั้น ในขณะที่คลาส 'overflow-scroll' จะแสดงแถบเลื่อนเสมอแม้ว่าจะไม่จำเป็นต้องเลื่อนก็ตาม บทความนี้แสดงวิธีใช้ 'overflow-auto' และ 'overflow-scroll' ใน Tailwind