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 (
- Section breaks (
- CSS breaks (
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
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
<p>, creates a new line.
<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.
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.
Code samples include hidden formatting characters that can interfere with operation. Paste into a text editor and reveal invisibles before pasting into Shopify theme. You may need to replace HTML less-than (
<) and greater-than (
>) with actual characters. Are you interested in more tips and code snippets like this? Indicate so within the comment field.