บทความนี้จะกล่าวถึงขั้นตอนการหนีบข้อความใน Tailwind
จะหนีบข้อความตามจำนวนบรรทัดที่ระบุได้อย่างไร?
คลาสการหนีบบรรทัดใน Tailwind จะจำกัดเนื้อหาข้อความในบล็อกให้เหลือเพียงจำนวนบรรทัดที่กำหนด เมื่อทำเช่นนี้ บล็อกข้อความจะซ่อนข้อความหลังจำนวนบรรทัดที่ระบุในชั้นเรียน สามารถใช้บนหน้าเว็บเพื่อแสดงให้ผู้ใช้เห็นว่ามีข้อมูลข้อความอยู่หรือซ่อนข้อความที่ไม่จำเป็นทั้งหมดเพื่อหลีกเลี่ยงความอิ่มตัวของหน้าเว็บ
ไวยากรณ์
ไวยากรณ์ที่กำหนดด้านล่างนี้มีอยู่ใน ' ระดับ ” คุณลักษณะขององค์ประกอบที่จะใช้การยึดเส้น:
ในรูปแบบที่กำหนดไว้ข้างต้น ผู้ใช้สามารถใช้ตัวเลขจาก “ 1 ถึง 6 ” สำหรับการใช้คลาสการหนีบบรรทัดเริ่มต้น ตัวอย่างเช่น “ เส้นยึด-1 ” คลาสจะไม่อนุญาตให้เนื้อหาข้อความเกินหนึ่งบรรทัด
มาทำความเข้าใจแนวคิดของคลาส 'line-camp' ผ่านตัวอย่างบางส่วนกัน
ตัวอย่างที่ 1: ใช้คลาส Line Clamp เพื่อจำกัดเนื้อหาให้อยู่ในจำนวนบรรทัดที่ระบุ
มาจำกัดเนื้อหาข้อความไว้ที่ 3 บรรทัดโดยใช้คลาส line-clamping ใน Tailwind ดังที่ทำด้านล่าง:
< กอง ระดับ = ' โค้งมน-lg flex justify-center bg-slate-200 m-5 p-4' >
< พี ระดับ = ' ไลน์-แคลมป์-3 w-72' > นี่คือย่อหน้าตัวอย่าง จะมองเห็นได้เพียง 3 บรรทัดเท่านั้น เนื้อหาทั้งหมดหลังจากนั้นจะถูกซ่อนไว้ นี่เป็นเพราะคลาสการหนีบสายใน Tailwind < / พี >
< / กอง >
คำอธิบายของโค้ดข้างต้นมีดังนี้:
- เอ “ กอง ” องค์ประกอบถูกสร้างขึ้นโดยมีมุมโค้งมนโดยใช้เครื่องหมาย “ โค้งมน-lg ' ระดับ. โดยให้ระยะขอบและช่องว่างภายในโดยใช้เครื่องหมาย “ ม-{หมายเลข} ” & “ p-{หมายเลข} ” ชั้นเรียน
- ถัดไป องค์ประกอบในองค์ประกอบ div จะอยู่ตรงกลางโดยใช้เครื่องหมาย “ ปรับศูนย์ ” คลาส และ “ ดิ้น ” คลาสสร้างคอนเทนเนอร์ที่จะมีองค์ประกอบลูกของ div
- “ bg-{สี}-{จำนวน} ” คลาสกำหนดสีพื้นหลังขององค์ประกอบ div
- เอ “ แท็ก ” ถูกสร้างขึ้นโดยมีเนื้อหาข้อความ มีการกำหนดความกว้างคงที่โดยใช้เครื่องหมาย “ w-{หมายเลข} ' ระดับ.
- สุดท้ายนี้เนื้อหาข้อความของ “ พี ” องค์ประกอบถูกจำกัดไว้ที่สามบรรทัดโดยใช้เครื่องหมาย “ เส้นยึด-3 ' ระดับ.
เอาท์พุต
จะเห็นได้ในผลลัพธ์ว่าเนื้อหาข้อความที่เกินขีดจำกัดที่ระบุสามบรรทัดถูกซ่อนอยู่:
ตัวอย่างที่ 2: ใช้คลาส Line Clamp พร้อมสถานะเริ่มต้นใน Tailwind
Tailwind มีสถานะเริ่มต้นต่างๆ สำหรับองค์ประกอบที่สามารถใช้เพื่อทำให้เลย์เอาต์การออกแบบมีความไดนามิกมากขึ้น นักพัฒนาสามารถใช้คลาส Tailwind ใดๆ ที่มีสถานะเหล่านี้เพื่อจัดเตรียมคุณสมบัติการออกแบบที่ระบุให้กับองค์ประกอบเมื่อใดก็ตามที่บรรลุถึงสถานะนั้น ในทำนองเดียวกัน คลาส 'line-clamp' สามารถใช้กับสถานะ Tailwind เริ่มต้นเหล่านี้ได้
ไวยากรณ์สำหรับการใช้คลาส 'line-clamp' ที่มีสถานะใน Tailwind มีดังต่อไปนี้:
{ สถานะ } : : เส้นยึด- { ตัวเลข }มีสถานะเริ่มต้นสามสถานะที่อธิบายไว้ดังนี้:
- โฮเวอร์: เป็นสถานะขององค์ประกอบเมื่อผู้ใช้วางเคอร์เซอร์ของเมาส์ไว้เหนือองค์ประกอบนั้น
- จุดสนใจ: เป็นสถานะเมื่อองค์ประกอบอยู่ในโฟกัส ตัวอย่างเช่น ผู้ใช้นำทางไปยังองค์ประกอบโดยการกดปุ่ม 'tab'
- คล่องแคล่ว: สถานะเมื่อผู้ใช้เปิดใช้งานองค์ประกอบ
ในการสาธิตด้านล่าง ทุกอย่างเหมือนกับตัวอย่างก่อนหน้านี้ ข้อแตกต่างเพียงอย่างเดียวคือคลาสการหนีบสายมีให้พร้อมกับ “ โฮเวอร์ ' สถานะ:
< กอง ระดับ = ' โค้งมน-lg flex justify-center bg-slate-200 m-5 p-4' >< พี ระดับ = ' โฉบ:line-clamp-3 w-72' > นี่คือย่อหน้าตัวอย่าง จะมองเห็นได้เพียง 3 บรรทัดเท่านั้น เนื้อหาทั้งหมดหลังจากนั้นจะถูกซ่อนไว้ นี่เป็นเพราะคลาสการหนีบ lin ใน Tailwind < / พี >
< / กอง >
โปรดทราบว่า “ ” ชั้นเรียนจัดทำโดย “ โฮเวอร์: เส้นยึด-3 ” ซึ่งจะจำกัดเนื้อหาข้อความไว้ที่สามบรรทัดทุกครั้งที่ผู้ใช้เลื่อนเคอร์เซอร์เมาส์ไปเหนือกล่องเนื้อหา
เอาท์พุต
จะเห็นได้จากผลลัพธ์ด้านล่างนี้ว่าคุณสมบัติการหนีบบรรทัดจะถูกใช้เมื่อเคอร์เซอร์ของเมาส์เลื่อนเมาส์ไปเหนือบล็อก:
ตัวอย่างที่ 3: ใช้ Line Clamp Class พร้อมเบรกพอยต์
เบรกพอยต์คือการสืบค้นสื่อใน Tailwind ที่ช่วยให้ผู้ใช้สร้างเลย์เอาต์การออกแบบที่ตอบสนองได้ Tailwind มีเบรกพอยท์เริ่มต้น 5 จุดพร้อมความกว้างขั้นต่ำที่กำหนดไว้ล่วงหน้า นักพัฒนายังสามารถใช้คลาสการหนีบสายกับเบรกพอยท์เหล่านี้ได้
ไวยากรณ์สำหรับการใช้คลาสการหนีบบรรทัดที่มีเบรกพอยต์มีดังนี้:
{ คำนำหน้าเบรกพอยต์ } : : เส้นยึด- { ตัวเลข }“คำนำหน้าเบรกพอยต์” ที่กล่าวถึงในไวยากรณ์ข้างต้นมีดังนี้:
- เอสเอ็ม: เบรกพอยต์นี้มีความกว้างขั้นต่ำ 640px
- แมรี่แลนด์: เบรกพอยต์นี้มีความกว้างขั้นต่ำ 768px
- แอลจี: เบรกพอยต์นี้มีความกว้างขั้นต่ำ 1024px
- เอ็กแอล: เบรกพอยต์นี้มีความกว้างขั้นต่ำ 1280px
- 2xl: เบรกพอยต์นี้มีความกว้างขั้นต่ำ 1536px
ในการสาธิตด้านล่างนี้ “ พี ” องค์ประกอบมีคลาส line-clamp ที่แตกต่างกันบนเบรกพอยต์ที่แตกต่างกัน สิ่งนี้จะเปลี่ยนคุณสมบัติการยึดบรรทัดของบล็อกข้อความทุกครั้งที่ถึงจุดพักใหม่:
< กอง ระดับ = ' โค้งมน-lg flex justify-center bg-slate-200 m-5 p-4' >< พี ระดับ = ' line-clamp-1 lg:line-clamp-3 md:line-clamp-2 sm:line-clamp-1 w-72' > นี่คือย่อหน้าตัวอย่าง จะมองเห็นได้เพียง 3 บรรทัดเท่านั้น เนื้อหาทั้งหมดหลังจากนั้นจะถูกซ่อนไว้ นี่เป็นเพราะคลาสการหนีบ lin ใน Tailwind < / พี >
< / กอง >
องค์ประกอบ p มาพร้อมกับคลาส 'line-clamp-1' โดยค่าเริ่มต้น อย่างไรก็ตาม เนื้อหาข้อความในองค์ประกอบ “p” จะถูกจำกัดเพียงหนึ่งบรรทัดสำหรับ “ เอสเอ็ม ” เบรกพอยต์ สองบรรทัดสำหรับ “ แพทยศาสตร์ ” เบรกพอยต์ และสามบรรทัดสำหรับ “ แอลจี ” เบรกพอยต์
เอาท์พุต
จากผลลัพธ์ เห็นได้ชัดว่าคุณสมบัติ line-clamp ของบล็อกข้อความเปลี่ยนแปลงเมื่อขนาดหน้าจอเปลี่ยนแปลง:
เราได้สาธิตขั้นตอนในการหนีบข้อความตามจำนวนบรรทัดที่ระบุใน Tailwind
บทสรุป
คลาสตัวหนีบบรรทัดใน Tailwind จะจำกัดเนื้อหาข้อความขององค์ประกอบให้เท่ากับจำนวนบรรทัดที่ระบุ คลาส “lin-clamp-{number}” ใช้เป็นไวยากรณ์สำหรับจำกัดข้อความให้อยู่ในบรรทัดที่จำกัด คลาสแคลมป์บรรทัดสามารถใช้กับเบรกพอยต์ที่กำหนดไว้ล่วงหน้าและตัวแปรสถานะใน Tailwind บทความนี้ได้จัดเตรียมขั้นตอนในการหนีบข้อความให้ได้ตามจำนวนบรรทัดที่ระบุ