ข้อความล้น: จุดไข่ปลาถือว่าเป็นอันตราย

เผยแพร่ซ้ำโดยเพลโต

ผู้ติดตาม: 0

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

อย่างไรก็ตาม ฉันมักจะเห็นมันใช้กับรายการต่างๆ เช่น ปุ่ม หรือแม้แต่ป้ายแบบฟอร์มเพื่อทำให้ดูสวยงามขึ้น (?) หรือเมื่อจัดแนวในแนวตั้ง แต่เมื่อคุณเปลี่ยนวิวพอร์ตหรือปรับขนาดข้อความ จุดสิ้นสุดของข้อความจะหายไป

ฉันคิดว่า “… ถ้าใช้ในบางสถานการณ์” อยู่ที่นั่น แต่แน่นอนว่าจะทำให้ชื่อโพสต์บล็อกดีขึ้นหากไม่มีมัน ตามที่ Eric กล่าว มีกรณีการใช้งานที่ถูกต้องสำหรับการตัดทอนข้อความ อาจมีเพียงไม่กี่คน แต่ถูกกฎหมาย

เป้าหมายสูงสุดคือการป้องกันไม่ให้ "สูญเสีย" ข้อมูลบางอย่าง ที่สามารถเกิดขึ้นได้อย่างแน่นอนใน CSS. ข้อความที่ล้นคอนเทนเนอร์โดยไม่ได้ตั้งใจจะสูญหายไปในแง่ที่ว่าไม่มีอยู่ตรงนั้น และถ้าข้อความนั้นไม่อยู่ ผู้ใช้จะพลาดแม้ว่าจะเป็นคำกระตุ้นการตัดสินใจที่ดีที่สุดและมีฝีมือดีที่สุดที่เคยเผยแพร่ทางเว็บ

Eric ชี้ให้เห็นว่าไม่มีทางที่จะทำให้ข้อความถูกตัดทอนโดย text-overflow: ellipsis มองเห็นได้. พอหมดก็หาย (แม้ว่าโปรแกรมอ่านหน้าจอดูเหมือนจะประกาศออกมาแล้วก็ตาม). ข้อมูลเกือบสูญหาย คุณอาจจะโอเคกับสิ่งนั้น ดีมากตราบเท่าที่คุณรู้สิ่งที่เกิดขึ้นและตั้งใจไว้

แต่นี่คือสิ่งที่ Eric พูดซึ่งทำให้ฉันต้องการแบ่งปันสิ่งนี้:

อย่าจำกัดเนื้อหาให้เข้ากับการออกแบบของคุณ ทำให้ CSS ของคุณมีความยืดหยุ่นในการจัดการคำที่ยาวขึ้นได้อย่างสวยงาม

อีกครั้งคุณ อาจ ต้องการสอดคล้องกับเนื้อหาในการออกแบบ แต่ฉันคงเถียงเหมือนเอริคว่า การออกแบบควรปรับให้เข้ากับเนื้อหา มากกว่าในทางกลับกัน ฉันมีช่วงเวลาที่ยากลำบากในการจำสถานการณ์ใด ๆ ที่ข้อความบนหน้าเว็บไม่สำคัญหรือไม่มีจุดประสงค์ในขอบเขตที่ฉันจะตัดทิ้งได้อย่างยอดเยี่ยมหากปิด ณ จุดใด ๆ ที่กำหนดโดยคุณสมบัติ CSS อาจเป็นที่เก็บถาวรของบล็อกโพสต์ที่แต่ละโพสต์แสดงข้อความที่ตัดตอนมาของเนื้อหาโพสต์ก่อนที่จะตัดทอน แต่นั่นไม่ใช่กรณีการใช้งานสำหรับ text-overflow: ellipse.

CSS มีเครื่องมือในการออกแบบที่ยืดหยุ่นซึ่งคำนึงถึงความยาวของข้อความที่แตกต่างกัน ดังนั้นอาจจะผิดพลาดในด้านของ เขียนป้องกัน CSS… CSS ที่คาดการณ์ปัญหาและรู้วิธีจัดการกับสถานการณ์เนื้อหาต่างๆ อย่างงดงาม text-overflow: ellipsis อาจเป็นส่วนหนึ่งของคลังแสง CSS ของคุณสำหรับสิ่งนั้น แต่มันอาจจะเป็นการโยนทารกออกไปพร้อมกับน้ำอาบ คุ้มค่าที่จะถามว่าการสูญเสียข้อมูลนั้นคุ้มกับค่าใช้จ่ายของเนื้อหานั้นหรือไม่ก่อนที่จะตัดผม

ในขณะที่เรากำลังพูดถึงการตัดทอนข้อความ...

ลิงค์ เมื่อ 1 ต.ค. 2021