'Using css pre-wrap vs br?
I'm wondering if there's any benefits to using <br> instead of css white-space:pre-wrap.
Most sites I've come across use <br> for line breaks on comment sections and other user written sections, instead of pre-wrap. Left wondering what benefits this has, as pre-wrap seems to be easier to implement, allows users to put their own line spacing, and so forth; which to me, would seem like a nicer user experience.
Only downside to this seems to be that very old browsers (IE 7-), which horrors seem to have been long forgotten as usage and support is now so low, don't fully support white-space.
Solution 1:[1]
Personally for me, the disadvantage of using white-space: pre-wrap would be not accounting for additional spaces/tabs, which HTML would count multiple spaces as a single space normally. This can be ugly sometimes, and also it gives the UI developer less control over how the comments section (for example) will look like, with variable user input.
See this Codepen for an example of how things might screw up, notice how spaces between words can appear at the start of new lines, as well as how a space can take up an entire line.
I personally just prefer to stick to the conventional <br /> way, since it allows me greater control for content to be displayed in expected ways.
Solution 2:[2]
I have a case where I list a few name/value pairs, separated with line breaks. Seems I have these options:
- a restyled pre (to show each name/value pair on a new line)
- make sure the name/value pairs are not html and use
- use white-space:pre-wrap
The least work in this situation is the css-option.
The reason why there are so many solutions with
in the wild, I guess, is because there was a time when that did not exist, and it's easy to stick to a once invented wheel.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | Irvin Lim |
| Solution 2 | Herbert Van-Vliet |