در اين بخش از
دوره آموزش HTML در آموزش دون
، با تگ
<wbr> آشنا ميشويم. اين تگ براي **تعيين محل شکست خط احتمالي (word break opportunity)** در
متن استفاده ميشود و به مرورگر ميگويد که در اين نقطه، در صورت نياز به شکستن خط، اجازه دارد متن را به خط بعد
منتقل کند.
تگ wbr در HTML چيست؟
تگ <wbr> يک عنصر خالي است که در متن قرار ميگيرد و به مرورگر امکان ميدهد تا در صورت
نياز، خط را در همان نقطه بشکند.
اين تگ براي جلوگيري از شکست نامناسب متنهاي طولاني مانند آدرسها يا URLها بسيار مفيد است.
مثال ساده از تگ wbr
<p>
آدرس سايت: https://www.learndun.ir/wbr-example/section/page
</p>
نتيجه: مرورگر ميتواند در صورت کوچک بودن عرض صفحه، خط را در نقطه <wbr> بشکند و متن را به
خط بعد منتقل کند بدون اينکه ظاهر متن خراب شود.
کاربردهاي wbr
- شکستن URLهاي طولاني در صفحات وب.
- جلوگيري از خروج متن از قاب يا container در طراحي ريسپانسيو.
- افزايش خوانايي متنهاي طولاني و جلوگيري از اسکرول افقي غيرضروري.
مثال ترکيبي با CSS
<style>
p {
width: 250px;
border: 1px solid #ccc;
padding: 5px;
word-wrap: break-word; /* کمک به شکست خط */
}
</style>
<p>
آدرس سايت: https://www.learndun.ir/wbr-example/section/page
</p> با CSS ميتوان ظاهر متن و رفتار شکست خط را بهتر کنترل کرد.
نکات مهم درباره wbr
- تگ
<wbr>يک عنصر خالي است و هيچ محتوايي ندارد. - براي متنهاي طولاني که ممکن است در صفحات کوچک خراب شوند بسيار مفيد است.
- ميتوان آن را همراه با CSS براي کنترل بهتر شکست خط و ظاهر متن استفاده کرد.
براي يادگيري کامل مديريت متن و طراحي ريسپانسيو در صفحات وب، پيشنهاد ميکنيم در دوره آموزش HTML و CSS آموزش دون شرکت کنيد.
براي مشاهده تمام آموزشهاي HTML، به صفحه اصلي آموزش دون مراجعه کنيد.
آموزش قبلي: تگ video در HTML
آموزش بعدي: تگ wbr پيشرفته و کاربردي
دیدگاه و پرسش