CODE

You Need A (Line) Break

ESTIMATE 1-MINUTE READ

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:

  1. Line breaks (<br />)
  2. Section breaks (</h2><h2> or <p></p> or <div></div>)
  3. 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.

HTML Line Break Methods

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.

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 (&lt;) and greater-than (&gt;) with actual characters. Are you interested in more tips and code snippets like this? Indicate so within the comment field.

References
  1. CSS white-space Property. w3docs.com
  2. HTML <nobr> Tag. w3docs.com
  3. Main photo by LinkedIn Sales Navigator from Pexels.
Kevin Williams is a Shopify Partner that has been program­ming data­base systems since 1990 and writing since 2010, before main­tain­ing an e-commerce site in Perl. Along with him, explore the Shopify platform and Liquid programming with marketing and writing tips.

Join Discussion