Let’s say you have this line on your webpage:
Hey guys, you may email me at yoyo@whatsup.heh or call me at 14344.
and you want to break the line right after the word “or”.
Do you do this:
[code lang=”html” title=”HTML”]
<p>Hey guys, you may email me at <a href="mailto:yoyo@whatsup.heh">yoyo@whatsup.heh</a> or<br>
call me at <a href="tel:14344">14344</a>.</p>
[/code]
or this?
[code lang=”html” title=”HTML”]
<p>Hey guys, you may email me at <a href="mailto:yoyo@whatsup.heh">yoyo@whatsup.heh</a> or
<span class="break">call me at <a href="tel:14344">14344</a></span>.</p>
[/code]
[code lang=”css” title=”CSS”]
span.break {display:block;}
[/code]
The latter? You’re doing a great start!
Rule of thumb: Write the HTML, forget the CSS
What I mean by this is, as you are writing the HTML markup, you should check your webpage in the browser as it is — without heavy consideration on how big the fonts should be or which color would be preettyy… Just imagine you’re a visually-impaired person “reading” a webpage.
The same way with sentences, it should run continously without consideration on the width of its container or the length of its line.
If we want a break in the line, it is purely for presentational purposes so do it thru CSS.
Leave a Reply