This solution works like a conditional break and is far better than adding non-breaking space between each word.
For aesthetics or clarity of thought, you may want to start a new line within a string of text. Within Hypertext Markup Language (HTML), three basic ways include:
- Line breaks (
<br />) - Section breaks (
</h2><h2>or<p></p>or<div></div>) - CSS breaks (
<span class="nowrap"></span>)
Line breaks do not add any extra vertical space (“leading” is the typography terminology). As you would when typing single-space text on a typewriter, you add more line breaks to increase space between paragraphs.
Section breaks not only distinguish size of text, they also communicate to search engines page structure. The title is normally <h1>. A subhead is <h2>. This is followed by headings of decreasing size through <h6>.
The underlying Cascading Style Sheet (CSS) determines both size and leading with the code that reads something like: margin-bottom: 1em. (An em space is the square of the width of the letter “m.” Hence, it is relative to the size of the font. You can also indicate 8px for a specific number of pixels.) Switching to a new style, like <h3> to <p>, creates a new line.
The <div> tag is similar to standard style tags, except by default it adds no styling. You may append a CSS class or local style tag to adjust spacing, alignment, and other attributes. An empty pair of <div> tags isolates the text (or other element) on a separate line.
CSS breaks are interesting because you can use them within tables to prevent words from wrapping. Keep a group of words together within a paragraph. A depreciated table tag is <nobr> (no break). For backwards-compatible browsers it could simply be added within a table data tag like this: <td nobr></td> or <nobr></nobr>. For optimum compatibility and more versatility, turn the tag into a CSS class called nowrap.
.nowrap {
white-space: nowrap;
}Use the class within table data: <td class="nowrap"></td>. You can also include it within <span> tags, which are normally for inline style changes. With the <no-wrap> class, you instruct the browser to keep all the words within the tags to remain together, as in the following example.
<h6>These words can wrap
<span class="nowrap">and these remain together</span></h6>These words can wrap and these remain together
Minimize or expand browser window width to see how lines break. The solution works like a conditional break and is far better than adding non-breaking space between each word. This feature is currently enabled within ClinicalPosters blog and article pages.
