การแบ่งคำหลังจากอักขระพิเศษเช่นเครื่องหมายเชื่อมใน CSS
คุณเคยประสบปัญหากับข้อความยาวที่เกินความกว้างของภาชนะหรือไม่? มันจะทำให้ยุ่งยากมากขึ้นเมื่อมีอักขระพิเศษเช่นเครื่องหมายเชื่อมเข้ามาเกี่ยวข้อง ในโพสต์นี้เราจะสำรวจวิธีการจัดการการห่อของข้อความอย่างมีประสิทธิภาพหลังจากเครื่องหมายเชื่อม ซึ่งจะช่วยเพิ่มประสบการณ์ผู้ใช้และความสามารถในการอ่าน
การทำความเข้าใจกับปัญหา
ลองพิจารณาสถานการณ์ CSS พื้นฐาน:
div {
width: 150px;
}
และใน HTML ของคุณ มี:
<div>
12333-2333-233-23339392-332332323
</div>
ที่นี่ ข้อความภายใน <div> เกินความกว้างที่กำหนดไว้ที่ 150 พิกเซล ซึ่งอาจทำให้เกิดการแสดงผลข้อความที่ไม่ถูกต้อง ทำให้ผู้ใช้ยากที่จะอ่านเนื้อหา ความท้าทายคือให้สตริง ห่อ ไปยังบรรทัดใหม่ที่ต้องการโดยเฉพาะที่อักขระเครื่องหมายเชื่อม (-)
วิธีแก้ปัญหา: การใช้เครื่องหมายเชื่อมอ่อน
เพื่อให้สิ่งนี้ทำงาน เราสามารถใช้ตัวอักขระพิเศษที่เรียกว่า เครื่องหมายเชื่อมอ่อน โดยการแทนที่เครื่องหมายเชื่อมปกติด้วยเครื่องหมายเชื่อมอ่อน เราสั่งให้เบราว์เซอร์แบ่งบรรทัดที่จุดเหล่านั้นเมื่อจำเป็น
วิธีการใช้เครื่องหมายเชื่อมอ่อน
-
แทนที่เครื่องหมายเชื่อมปกติด้วยเครื่องหมายเชื่อมอ่อน: แทนที่จะใช้เครื่องหมายเชื่อม (-) คุณจะเปลี่ยนมันเป็นเอนทิตี HTML
­ซึ่งช่วยให้เบราว์เซอร์สามารถถือว่าเป็นจุดที่เป็นไปได้ในการแบ่งบรรทัดHTML ที่แก้ไขแล้วจะมีลักษณะดังนี้:
<div> 12333­2333­233­23339392­332332323 </div> -
ผลลัพธ์ที่ได้: เมื่อคุณทำเช่นนี้ ถ้าข้อความต้องห่อเนื่องจากข้อจำกัดความกว้าง 150px มันจะถูกแบ่งอย่างสวยงามที่เครื่องหมายเชื่อม เนื้อหาที่ห่อแล้วจะดูเป็นระเบียบและน่าสนใจมากขึ้น
ตัวอย่างทั้งหมด
นี่คือตัวอย่างโค้ดทั้งหมดที่รวมทั้ง CSS และ HTML ที่แก้ไขแล้วเพื่อความชัดเจนมากขึ้น:
div {
width: 150px;
}
<div>
12333­2333­233­23339392­332332323
</div>
สรุป
โดยการทำตามขั้นตอนข้างต้น คุณสามารถทำให้แน่ใจว่าคำจะถูกแบ่งอย่างเหมาะสมที่เครื่องหมายเชื่อม ส่งผลให้มีประสบการณ์ที่เป็นมิตรกับผู้ใช้มากขึ้น การใช้เครื่องหมายเชื่อมอ่อนเป็นกลยุทธ์ที่ง่าย แต่มีประสิทธิภาพที่จะทำให้เนื้อหาข้อความของคุณอ่านง่ายขึ้นมาก
อย่าลังเลที่จะนำวิธีนี้ไปใช้ในโครงการออกแบบเว็บไซต์ครั้งถัดไปของคุณ — ผู้ใช้ของคุณจะชื่นชมการจัดระเบียบข้อความที่ดีขึ้น!