BR Tags Misuse
When I edit content on a web page, I have to make sure it looks nice and have no widows on paragraphs. It sounds like an easy thing to do. As some might say, just put a <br /> tag before the word you would like it to be on the next line, then the code will give an obvious line break. Actually that’s the misuse of the BR tag. The BR tag is used for giving the real semantic line break, not just visual presentation line break.
Print Won’t Work
The print version would come out ridiculous when use <br /> tags mistakenly. The print page has its own CSS to apply. So the width and height of the boxy divs are totally different on the print side. The words you edited might not flow with the rest of the paragraph on the print version because of the hard code <br /> tag.
Solution
Easy way to solve this is to put tag in the spaces between the two words which should be on the new line.
Example*
Do this
We had just the venue, Dolores Park, which has a striking resemblance to the Gran Paradiso theme of Firefox 3.
Result
* Content is taken from www.webmynd.com/html/FireFox3_LaunchParty.html
Note
I cannot find a way to solve the phone number format yet when the line is breaking between the hyphen, e.g. (800) 555-7777.
Using Pre tag, would look like this below. It needs additional styling to make it flow with the rest of the paragraph.
With Pre tag
Firefox 3.
4 Comments until now
Wow, I never knew this about the tag. It’s really not useful in all situations, is it?
one question, do you need the tag between the numbers and the hyphens. I think web text tends to wrap to the next line where hyphens break up text.
what do you think?
This is interesting. I think another way to preserve white space is to use the ‘pre’ tag. I saw it on W3Schools
http://www.w3schools.com/TAGS/tag_pre.asp
Shawn – You are right. It seems like the hyphens are still creating an issue. I cannot find a way to fix this yet, except making content longer.
Sam – Good idea on the < pre > tag. But the < pre > tag would need additional styling to make it flow with the rest of the paragraph. I added the outcome of using < pre > tag under the Note section.
Using a similar method as your non-breaking space, not that I’ve tried it;
http://www.w3.org/TR/REC-html40/struct/text.html#h-9.3.3
_
Add your Comment!