รู้หมือไร่…ใช้ CSS3 ตัดประโยคบทความได้!

0
css-coding

รู้หรือไม่ว่า css3 ตัดประโยคได้ หลายคน ๆ รวมทั้งเราเองเมื่อก่อนก็ตัดประโยคด้วยฟังก์ชั่น php หรือ javascript เพื่อลดข้อความที่ต้องการแสดงบนการ์ดฟีดเจอร์โพสต์

จากภาพข้างบนจะเห็นได้ว่าตัวเนื้อที่นำมาแสดงในฟีดยาวมากๆ เขาจึงมีการตัดออกแล้วเติมจุดไข่ปลา (…) เพื่อบ่งบอกข้อความนี้ว่ามีต่อ กดเข้ามาสิ กดมาอ่านฉัน บลาๆ แทนการเขียนคำว่า อ่านต่อ readmore เสียดายที่ข้างบนโค้ดเขาตัดด้วย ฟังก์ชั่น php วันนี้จะพามารู้จักกับ css shorten text with dots กัน ว่าเขียนอย่างไรได้บ้าง

เบิกตัวพระเอกของงาน css property ที่ชื่อ text-overflow วู้ วู้ 🥳 🥳

Text-overflow เป็นการจัดการเนื้อหาล้นออกนอกกล่องข้อความของเราออกไป ไม่ได้ตัดข้อความให้หายไปจากโค้ดแต่ซ่อนไว้ ครอปให้เห็นส่วนเนื้อหาที่อยู่ในกล่องเท่านั้นเอง และสามารถเพิ่มจุดไข่ปลา (‘…’) ต่อท้ายเนื้อหาให้อัตโนมัติ หรือเราจะไม่ใส่ก็ได้

เมื่อเรา inspect ดูก็จะเห็นข้อความเต็มๆ ที่ถูกซ่อนเอาไว้

Ref img : https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow

คุณสมบัติ text-overflow ไม่ได้เป็นตัวบังคับข้อความที่ล้นคอนเทนเนอร์ให้เกิดการซ่อนหรือตัดเหมือน overflow ในการทำให้ซ่อนนั้นจำเป็นต้องใช้คุณสมบัติ CSS อื่นๆ ด้วย เช่น 

white-space: nowrap;

 overflow: hidden;

Syntax

text-overflow: clip|ellipsis|string|initial|inherit;

clip เป็นค่าเริ่มต้น ข้อความถูกตัดไม่มีอะไรต่อท้าย

ellipsis ข้อความที่ถูกตัดจะมีจุดไข่ปลาต่อท้าย (“…”)

string ข้อความที่ถูกตัดจะมีข้อความเราตั้งต่อท้าย

initial เรียกใช้งานคุณสมบัติค่าเริ่มต้น

inherit เรียกใช้งานคุณสมบัติจาก element ที่เป็น parent กัน

ตัวอย่างการเขียน

แบบที่ 1 

Css ที่กำหนด

กำหนดแค่ 3 property ที่ต้องใช้เป็นหลักตามบทความ

ผลลัทธ์ที่ได้จะมีจุดไขปลาเพราะใช้ ellipsis ค่าอื่นจะไม่มีจุดไข่ปลา

Ref ex: https://codepen.io/chriscoyier/pen/gvFGI

ถ้าเราเปลี่ยนค่า css ที่ .titleContent

แบบที่ 2

ผลลัทธ์ที่ได้ยังเหมือนเดิม เพราะ div ทั่วไปถ้าไม่ได้กำหนดค่า display อื่นนั้นมีคุณสมบัติเป็น block อยู่แล้วเลยทำให้ผลลัพธ์ไม่มีการเปลี่ยนแปลง

ถ้าปรับเป็น display: -webkit-box; line-clamp: 3 และ box-orient: vertical จะถูกกำหนดให้แสดงข้อความยาวๆให้เห็นได้ 3 บรรทัดแล้วตัดไป 3 บรรทัดนี้รวมจุดไข่ปลาด้วย

ผลลัทธ์

เนื่อจากข้อความที่ใส่ขนาดไม่เกิน 3 บรรทัดข้อความจึงไม่โดนตัดนะ

ดังนั้นเราจึงลองลดขนาดกล่องนอกดู จะเห็นผลลัพธ์ได้ดีเมื่อขนาดของ box ข้อความไม่ใช่ 100% ตามภาพ

ผลลัทธ์

Text-overflow เป็นรูปแบบการตัดประโยค การจัดเลย์เอาท์ยุคใหม่ด้วย css ที่ช่วยอำนวยความสะดวยให้กับเราโดยเฉพาะเว็บประเภทข่าว แมกกาซีน หรือ เว็บบล็อก เพราะข้อความที่เป็น caption หรือ short description ที่มีคีย์สำหรับ SEO หรือคำอธิบายต่างๆ จะไม่ถูกตัดออกไปจนหมด และหมดปัญหาเรื่องการทำ responsive เพราะที่ถูกกำหนดด้วย text-overflow ก็จะแสดงผลให้ขนาดของ box เท่าเดิม ไม่มีความสูงหรือต้องกำหนดค่าอื่นเพิ่มเติม

Ref : https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow

ตัวอย่างโค้ด http://jsfiddle.net/Suphawadee/um3fb170/7/

LEAVE A REPLY

Please enter your comment!
Please enter your name here

fourteen + three =