Break Free: 3 Essential Tricks for Unbreakable Website Content

Picture this:

You’re given a nicely formatted document that needs to be converted into a page on your website.

You enter it into your content management system, but when you preview the page, the text is falling apart.

Branded terms or key phrases are breaking across lines, even when they’re hyphenated.

Some lines of text are too close together, while others are too far apart.

It just doesn’t look anything close to how it did in the original doc.

Frustrating, right?

Don't worry - we've got three quick tips that will keep your content looking sharp:

1. Non-Breaking Spaces

Most websites use “responsive design”. In other words, they’re built to work on any size screen.

This means all your lines of text will wrap differently on every device.

You might discover that an important brand name or cohesive phrase is breaking apart when text wraps to a new line.

Try adding a non-breaking space between words, to keep important names, phrases, and trademarks connected!

Either of these keyboard shortcuts should do the trick:

• Mac: Option + Space

• Windows: Shift + Space

2. Non-Breaking Hyphens

You may have already known about that non-breaking space shortcut, but did you know there’s also a non-breaking hyphen?

It’s perfect for when you’re dealing words like:

• First-year, Second-year, etc.

• Full-time / Part-time

• On-campus / Off-campus

• Co-curricular

• Self-paced

• Community-based, Evidence-based, Place-based

• Service-learning

• Data-driven, Field-tested

• Cross-disciplinary

• Best-in-class

The non-breaking hyphen looks exactly like a normal hyphen.

Here’s a regular hyphen: -

And here’s a non-breaking one: ‑

There’s no direct keyboard shortcut for this, but what you can do is…

On Mac:

1. Place your cursor where you want the non-breaking hyphen to appear.

2. Access the “Character Viewer” by pressing Control + Command + Space.

3. Then search for "non-breaking hyphen" and click to insert it where your cursor is.

On Windows:

1. Where you want the non-breaking hyphen to appear, type “2011” (without the quotes).

2. Then highlight it and press Alt + X to convert it into a non-breaking hyphen.

If you forget all this:

1. Google “non-breaking hyphen” and copy the character from one of the listed results into your clipboard.

2. Paste into your CMS.

3. Paragraphs vs. Line Breaks

Everyone knows:

When you’re working in a WYSIWYG or Rich Text field, you can press Enter to create a new paragraph.

Doing that will automatically create HTML paragraph tags, which look like this in the code:

<p>Your text is wrapped in paragraph tags!</p>

Your front-end theming code will have some CSS that assigns a pre-set amount of space between HTML paragraphs.

This ensures you’ll have a little more vertical spacing between separate paragraphs than between wrapped lines within the same paragraph.

It also allows you to apply styles like headings, bullets, or buttons to specific text, without affecting text above or below it.

But sometimes you want to drop text onto the next line without having so much space in between.

That’s when you’ll use Shift+Enter instead.

This time, the HTML being added behind the scenes is a single line break within the parent paragraph or bullet list item.

It looks like this: <br>

Or sometimes like this: <br />

This can be helpful in many situations:

• Faculty contact information where you want name, title, department, and office number to stay visually grouped.

• Event details where date, time, and location should appear as a cohesive block.

• Campus directions where building names and room numbers need to stay together without excessive spacing.

• A bullet list where each single bullet needs multiple lines, for example to communicate course prerequisites or degree requirements.

This works in most CMS tools, as well as many document formats like Google docs and MS Word.

So next time you’re building a web page, consider how your users will see the flow of information.

Using the right type of line break helps keep related information visually connected while maintaining readability.

Remember: press Enter for new thoughts, or Shift+Enter for related details.

Bonus Tip: Dealing With Long Pages

Sometimes, breaking things up is exactly what you need!

When working with long-form content in Drupal, consider:

• Breaking content into separate fields on a custom content type, so you don’t have to manage whole layouts inside a WYSIWYG or rich text field.

• Using paragraph components to ensure consistency across multiple editors on your team, preventing the layout from breaking.

• Applying taxonomy-driven filtered search, so users can break your content into segments that mean the most to them.

• Providing a table of contents with jump links so users can quickly scroll to key sections of the page, broken down by hierarchical headings.

Need help keeping your content together? Or knowing when to break it apart?

There are tons of ways to make your Drupal site work better for you and your team.

Let's explore the possibilities together!