แท็ก <wbr> ใน HTML5 ย่อมาจาก “Word Break Opportunity” ซึ่งเป็นเครื่องหมายบอกตำแหน่งที่เหมาะสมให้เบราว์เซอร์ตัดคำหรือขึ้นบรรทัดใหม่ หากคำหรือข้อความยาวเกินพื้นที่ที่มีอยู่ในบรรทัดเดียว
การใช้งานพื้นฐาน
<wbr>จะไม่แสดงผลใด ๆ จนกว่าข้อความจะต้องถูกตัดในตำแหน่งนั้น- เหมาะสำหรับการตัดคำหรือขึ้นบรรทัดใหม่ในตำแหน่งที่เราต้องการ โดยไม่ทำลายโครงสร้างของคำ
ตัวอย่างการใช้งาน
ข้อความยาว ๆ ที่ไม่สามารถตัดบรรทัดได้
<p>ThisIsAReallyLongWordWithoutSpaces<wbr>SoItWillBreakAt<wbr>TheNextOpportunity.</p>ในตัวอย่างนี้ ข้อความจะตัดที่ตำแหน่ง <wbr> เมื่อมันเกินความกว้างของพื้นที่บรรทัด
ตัดคำใน URL ยาว ๆ
<p>Visit our website: www.example<wbr>.com/this_is_a_very<wbr>_long_url_path_that<wbr>_could_break_here</p>ในตัวอย่างนี้ ถ้าพื้นที่ของบรรทัดไม่พอ URL จะถูกตัดในตำแหน่งที่ <wbr> วางไว้
การประยุกต์ใช้งานอื่น ๆ
ในภาษาอื่น ๆ ที่ไม่ใช้การเว้นวรรคสำหรับการตัดคำ เช่น ภาษาไทยหรือภาษาจีน: แม้ในภาษาที่ไม่ใช้การเว้นวรรคในการตัดคำ <wbr> ก็ยังมีประโยชน์ในบางกรณีที่ต้องการบังคับการตัดบรรทัด เช่น ในการแสดงชื่อโดเมน URL หรือชื่อไฟล์ที่ยาว
<p>โดเมนที่ยาวมาก: www.example<wbr>.com/โดเมนที่ยาวมาก<wbr>ๆ</p>ในโค้ดโปรแกรมที่ยาว: ถ้าต้องการแสดงโค้ดที่ยาวเกินในบรรทัดเดียว เราสามารถใช้ <wbr> เพื่อกำหนดจุดที่เหมาะสมให้เบราว์เซอร์ตัดบรรทัดได้
<code>const veryLongVariableName = "ThisIsAReally<wbr>LongVariable<wbr>NameThatCan<wbr>BreakHere";</code>การใช้ <wbr> ทำให้เนื้อหาที่แสดงมีความยืดหยุ่นมากขึ้น โดยเฉพาะเมื่อต้องการจัดการกับคำยาว ๆ หรือข้อความที่อาจทำให้การแสดงผลไม่สมบูรณ์ในหน้าจอที่มีความกว้างจำกัด