I was asked by a visitor how he could prevent 2 or more words on a web page from being "broken up", that is, separated and placed onto 2 different lines by a web browser's default wrapping of long lines. There are at least a couple of ways of doing this.
This article assumes that you already have a web page containing the text you want to keep within a single line. This web page can either be created using a web editor, or it can be part of a blog post. (If you don't already have a website, click here to find out how to set up one.)
Since my visitor did not specify which web editor or blog software he was using, I shall describe how to do this using HTML and CSS, so that it is general enough to be used with any editor or blog. You will, however, need to know how to insert HTML and CSS code using your software. For those who are not sure how to do this, here is a list of some tutorials; read the one(s) relevant to you.
If you only have the one-off instance of two or more words that you want to force the browser to keep on a single line,
the easiest way is to use the non-breaking space character, " ", to separate those words
instead of a normal space.
For example, if the words in question are "The Site Wizard", write it as follows:
The browser will then treat that string of characters as though they were part of single word, and by default, not split it up when it crosses the edge of the screen or enclosing block.
If you have multiple instances of two or more words that you need to guard against splitting, another way
is to enclose those words in a <span> and set a CSS rule to prevent wrapping.
Using the same example as above, at the HTML level, your words will now look like this:
You will also need to insert the corresponding CSS rule into your style sheet:
The demo in the box below shows the above rules in action. I have deliberately made the box narrow, so that
I don't have to write a lot of placeholder text just to get the wrapping effect. The words
in the <span> have also been highlighted so that they are easier to spot.
This paragraph demonstrates the effect of using CSS rules to keep the words The Site Wizard together even if portions of it would ordinarily have been wrapped onto a separate line by a browser.
As you can see, in order to adhere to my rules of not wrapping "The Site Wizard", the browser was forced to put those words onto a new line, since there wasn't enough space on the previous one to accomodate everything.
The advantage of the HTML method is that it is easy to use if you just want to fix one or two instances where the splitting of adjacent words poses a problem. This is especially so if you use blog software, where you can't easily add CSS rules. All you have to do is to switch to its HTML entry mode to insert the non-breaking space. (For example, for those who use WordPress, just click the "+" at the top of the Add Post screen of the Block editor, and in the overlay that appears, click "Formatting" to expand the section. Then click "Custom HTML". You will be able to enter your HTML code directly, from that point.)
The advantage of the CSS method is that it separates presentation from your content. It is useful if you have multiple occurrences of words that you want to keep together. If you ever change your mind about how you want those words to be displayed in the future, you will only need to modify the rules in a single place, the style sheet, and all those instances will automatically adopt the new display rules. You don't have to search and replace the actual text on every page of your site just to update it.
The features described here are compatible with all modern browsers. In fact, since they were implemented in the early days of HTML and CSS, they will also work in old browsers, even as far back as Internet Explorer 5.5.
Copyright © 2020 Christopher Heng. All rights reserved.
Get more free tips and articles like this,
on web design, promotion, revenue and scripting, from https://www.thesitewizard.com/.
Do you find this article useful? You can learn of new articles and scripts that are published on thesitewizard.com by subscribing to the RSS feed. Simply point your RSS feed reader or a browser that supports RSS feeds at https://www.thesitewizard.com/thesitewizard.xml. You can read more about how to subscribe to RSS site feeds from my RSS FAQ.
This article is copyrighted. Please do not reproduce or distribute this article in whole or part, in any form.
It will appear on your page as:
How to Prevent Two or More Words from Being Split into Separate Lines (HTML/CSS)
