แท็ก wbr
แท็ก wbr ระบุตำแหน่งที่เบราว์เซอร์
สามารถแบ่งบรรทัดได้หากจำเป็น
(หากข้อความไม่พอดีกับความกว้างขององค์ประกอบ)
การแบ่งบรรทัดแบบนี้เรียกว่าการแบ่งบรรทัดแบบอ่อน
ไม่ต้องการแท็กปิด
เมื่อแบ่งคำผ่านแท็ก wbr จะไม่มีการเพิ่ม
เครื่องหมายแบ่ง "-" หาก
คุณต้องการเครื่องหมายนี้ - ให้ใช้สัญลักษณ์การแบ่งคำแบบอ่อน
­ (ต้องมีอัฒภาค
ต่อท้ายเสมอ นี่ไม่ใช่การสะกดผิด)
การแบ่งคำแบบอ่อน ­ ระบุ
ให้เบราว์เซอร์ทราบตำแหน่งที่สามารถแบ่งคำได้
(หากจำเป็น) โดยใส่
เครื่องหมายแบ่ง "-" ไว้ด้วย
การแบ่งคำแบบอ่อน ­ จะ
ไม่ทำงานหากคุณสมบัติ hyphens
ถูกตั้งค่าเป็น none (แต่การแบ่งบรรทัดด้วย
wbr จะทำงาน)
ตัวอย่าง . ข้อความที่ไม่มีการแบ่งบรรทัด
มาดูตัวอย่างข้อความที่มี คำยาว ๆ ที่ล้นออกมา เกินขอบเขตของบล็อก กำหนดให้บล็อกมีความกว้าง น้อย ๆ เพื่อให้คำยาวไม่ พอดี:
<div id="elem">
this is supersupersuperlong text
</div>
#elem {
width: 200px;
border: 1px solid black;
}
:
ตัวอย่าง . แท็ก wbr
ในที่นี้ ลองเพิ่มแท็ก wbr ลงใน
ตำแหน่งที่เราแนะนำให้เบราว์เซอร์ทำการ
แบ่งคำหากจำเป็น (โปรดสังเกต
ว่าเบราว์เซอร์จะไม่ทำการแบ่งบรรทัด
ทุกตำแหน่งที่เราระบุ):
<div id="elem">
this is super<wbr>super<wbr>super<wbr>long text
</div>
#elem {
width: 200px;
border: 1px solid black;
}
:
ตัวอย่าง . สัญลักษณ์ ­
ลองใช้สัญลักษณ์ ­ แทนแท็ก wbr
ดู ที่ตำแหน่ง
การแบ่งบรรทัดจะมีเครื่องหมายยัติภังแสดง:
<div id="elem">
this is supersupersuperlong text
</div>
#elem {
width: 200px;
border: 1px solid black;
}
:
ดูเพิ่มเติม
-
แท็ก
br,
,
ซึ่งทำการขึ้นบรรทัดใหม่ -
คุณสมบัติ
hyphens,
ซึ่งกำหนดการแบ่งคำที่แท้จริง -
คุณสมบัติ
word-breakและoverflow-wrap,
ซึ่งอนุญาตให้แบ่งตัวอักษรของคำยาวได้ -
คุณสมบัติ
overflow,
ซึ่งตัดส่วนที่ล้นออกนอกขอบเขตของบล็อก
