wbr, display in browser
Browser display, wbr element
- wbr element it's a void element (has no content): nothing to display in browser
- wbr element when present might produce the following visual effect: breaks the current line pushing the text that comes after it on the next line
Video demonstration wbr element, view in browser
HTML5 wbr, browser display, Tutorial
| min | video details |
|---|---|
| 00:04 | video tutorial: testing the browser display of the wbr element |
| 00:12 | empty wbr element (start tag, end tag, only) does not display in browser |
| 00:17 | the wbr element has no content, no children because it has no 'inside' (no end tag, it's a void element) |
| 00:28 | facts: paragraph nested inside 2 div elements of a fixed width: 325px |
| 00:32 | note how the text length exceeds the width of the div |
| 00:37 | we may fix this by adding a line break opportunity (wbr) after d letter |
| 00:40 | the visual effect of the wbr in browser: it breaks the line, pushing the text that comes after it on the next line |