กำหนด Element ให้แสดงข้อความไม่เกินจำนวนบรรทัดที่กำหนด

หลายๆ ครั้งที่พอเราออกแบบเว็บมาอย่างสวยงาม  element แต่ละอันเข้ารูปเข้ารอย  แต่พอเอามาใช้จริงกลับไม่เป็นอย่างในดีไซน์  เพราะเจอปัญหาว่าข้อความมันมีจำนวนบรรทัดไม่เท่ากัน

สำหรับข้อความภาษาอังกฤษอาจจะไม่มีปัญหาเท่าไหร่นัก  เพราะเราสามารถใช้ substr() ในการตัดให้เหลือจำนวนตัวอักษรพอดีกับจำนวนบรรทัดที่เราต้องการได้  แต่ภาษาไทยมันไม่เป็นเช่นนั้น  เพราะ substr() มันก็นับสระและวรรณยุกต์เป็นตัวอักษรตัวหนึ่งเหมือนกัน

ทางแก้ของเราคือเราจะใช้การกำหนด line-height,  height และ overflow เข้าช่วยครับ

กำหนดความสูงให้เท่าจำนวนบรรทัด

สิ่งแรกที่เราต้องทำก่อนคือการกำหนดความสูงให้กับ Element นั้นๆ ให้เท่ากับความสูงของจำนวนบรรทัดที่เราต้องการ

การที่เราจะกำหนดความสูงให้พอดีกับจำนวนบรรทัดได้นั้น  เราจำเป็นจำต้องกำหนดความสูงของบรรทัดเสียก่อน (line-height) แล้วจึงกำหนดความสูงของ element เป็น ความสูงบรรทัด*จำนวนบรรทัด เช่น

.box {	
	line-height:14pt;
	height:56pt;
}

จากตัวอย่างจะเห็นว่าผมกำหนดให้บรรทัดสูง 14pt และกำหนดให้ element สูง 56pt (4 บรรทัด 14×4 = 56)

เมื่อเรากำหนด CSS ดังกล่าวเรียบร้อยแล้ว  เราจะได้ element ที่สูงพอดีกับจำนวนบรรทัดที่ต้องการ  แต่ว่าจะยังเกิดปัญหาเนื้อหาล้นออกจาก element อย่างเช่นตัวอย่างนี้

ซ่อนเนื้อหาที่เกินด้วย Overflow

เมื่อเนื้อหามันเกิน  เราก็ต้องซ่อนมันครับ  โดยให้เราเพิ่ม CSS ส่วน overflow:hidden ลงไป

.box p {
	line-height:14pt;
	height:56pt;
	overflow:hidden;
}

สำหรับรายละเอียดการใช้ Overflow เพิ่มเติม  สามารถดูได้ในเว็บของ W3Cschool ครับ

ซึ่งเราก็จะได้ผลลัพธ์ออกมาตรงตามที่ต้องการแล้วนั่นคือการจำกัดให้เนื้อหาแสดงเพียงแค่ 4 บรรทัด

เสริมให้อีกนิดเรื่อง Overflow ครับ  เราสามารถใช้ overflow:auto; มาใช้แทน clearfix สำหรับ element ที่ float ได้ด้วยครับ

การตัดข้อความด้วย substr() ยังจำเป็นหรือไม่?

แม้ว่าเราจะสามารถ “ซ่อน” ข้อความส่วนเกินได้แล้ว  แต่การตัดข้อความด้วย substr() (หรือ mb_substr() สำหรับภาษาไทย UTF-8) ก็ยังเป้นสิ่งที่ควรทำครับ  เพราะมันจะลดปริมาณข้อมูลที่ส่งไปให้กับผู้ใช้  นั่นหมายถึงว่าเว็บจะสามารถโหลดได้เร็วขึ้นด้วยนั่นเอง

Posted by Jirayu

WordPress Developer ที่พอมีประสบการณ์อยู่บ้าง วันไหนไม่ทำงานอยู่บ้านว่างๆ ก็นั่งเลี้ยงแมว

Comments