กำหนด 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) ก็ยังเป้นสิ่งที่ควรทำครับ เพราะมันจะลดปริมาณข้อมูลที่ส่งไปให้กับผู้ใช้ นั่นหมายถึงว่าเว็บจะสามารถโหลดได้เร็วขึ้นด้วยนั่นเอง
บทของที่แหล่มเป็ดจริงๆ
ปกติเรากำหนด line-height เป็น em ฮี่ๆ แต่ชอบ เข้าใจง่ายมากเลยค่ะ
ปกติเรากำหนด line-height เป็น em ฮี่ๆ แต่ชอบ เข้าใจง่ายมากเลยค่ะ