[How to] ทำกล่องไม่ให้อักษรเกินด้วย CSS

หลายๆคนเวลาทำเว็บจะมีบางตำแหน่งอย่างให้ตัวอักษรไม่เกินจากความกว้างของกล่องที่ครอบว่า ในกรณีนี้จะเป็น Div,a,span, etc. พวกนี้ โดยเราอยากให้มีตัวจุด 3 จุด ต่อท้ายให้รู้ว่ามันยังไม่จบนะมีต่ออีกแต่ประโยคมันยาวเกินไปเอาล่ะไปดูกันดีกว่าว่าทำอย่างไร

สิ่งแรกที่คุณต้องรู้จักคือ css ตัวนี้เลยครับ text-overflow โดยค่าที่ต้องตั้งคือ ellipsis นะครับตามนี้เลย > คลิก < แต่ไม่ใช่ว่าจะใช้อย่างเดียวนะครับจริงๆแล้วมันใช้พร้อมๆกับค่า overflow:hidden เพื่อไม่ให้เกินจากความกว้างกล่องที่เรากำหนดครับ

สั้นๆง่ายๆสำหรับวันนี้เพราะผมไปเจอมาเลยอยากเขียนแชร์ไว้ครับผม

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

Loading

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Message us

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

Privacy Preferences

คุณสามารถเลือกการตั้งค่าคุกกี้โดยเปิด/ปิด คุกกี้ในแต่ละประเภทได้ตามความต้องการ ยกเว้น คุกกี้ที่จำเป็น

ปฎิเสธทั้งหมด
Manage Consent Preferences
  • คุกกี้ที่จำเป็น
    Always Active

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

  • คุกกี้ที่จำเป็น

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

บันทึก