HTML5 <wbr> Tag
Introduction to HTML5 <wbr> Tag
आपके content में जब कोई string बहुत बड़ी हो तो छोटी screen पर browser में वह ठीक से break नहीं होती है और आपके paragraph के structure को बिगाड़ देती है। इसके HTML5 में solution provide किया गया है।
HTML5 आपको <wbr> tag provide करती है। इसे word break opportunity कहा जाता है। इस tag को आप किसी long string के बीच में use कर सकते है।
<wbr> tag line break की opportunity define करता है। इसका मतलब ये हुआ की <wbr> tag के द्वारा आप बताते है की जरुरत पड़ने पर browser string को कँहा से break कर सकता है।
जब string को display होने के लिए appropriate screen size होती है तो text बिना break हुए show हो जाता है। लेकिन जब screen text या string को एक line में show नहीं कर पाती है तो <wbr> tag द्वारा define किये गए points पर से break हो जाती है।
Difference between <wbr> and <br> Tag
- <br> tag line break को force करता है। <wbr> tag text को केवल जरुरत पड़ने पर ही break करता है।
- <br> tag line को break करने के लिए use किया जाता है। <wbr> tag word को break करने के लिए use किया जाता है।
<wbr> tag long strings के बीच use किया जाता है जिनमें space नहीं होता है। हालाँकि इसकी जगह <br> tag भी use किया जा सकता है लेकिन जैसा की मैने आपको बताया <br> tag द्वारा line tag avaliable space होने पर भी text को next line में ही show करता है।
Syntax of HTML5 <wbr> Tag
<wbr> tag का syntax निचे दिया जा रहा है।
string<wbr>string<wbr>string<wbr>string
जैसा की आप ऊपर दिए गए syntax में देख सकते है <wbr> tag द्वारा एक string में कई line break opportunities define की गयी है। आइये अब इसे एक उदाहरण के माध्यम से समझते है।
मान लीजिये एक BestHindiTutorials एक string है। Normally जब ये string किसी web page में show होगी तो पूरी एक साथ show होगी। लेकिन आप <wbr> tag द्वारा इसमें word break opportunities define कर सकते है। ऐसा करने से जरुरत पड़ने पर ये string break होकर अलग अलग भी show हो पाएगी। ऐसा आप इस प्रकार कर सकते है।
Best<wbr>Hindi<wbr>Tutorials
यदि इस situation में आप <br> tag को use कर्नेगे तो तीनों अलग अलग lines में show होंगी।
Attributes of HTML5 <wbr> Tag
<wbr> tag के लिए कोई element specific attribute नहीं है। ये सभी global attributes जैसे की id, class आदि को support करता है।
Event Attributes of HTML5 <wbr> Tag
<wbr> सभी global event attributes को support करता है।
Example:
<html>
<head>
<style>
#myP{
width:200px;
border:1px solid #ebebeb;
}
</style>
</head>
<body>
<p id="myP">Hi, Welcome to Best<wbr>Hindi<wbr>Tutorials</p>
</body>
</html>
ऊपर दिए गए उदाहरण में BestHindiTutorials एक complete string है। इस string में <wbr> tag द्वारा word break opportunity define की गयी है। जरुरत पड़ने पर यह string properly अलग हो कर शो हो सकती है। ये उदाहरण निचे दिया गया output generate करता है।
