Dale Stubbart

Keeping Text Together &n-; Non-Breaking Hyphens

How to keep text on the same line in Word and on Websites

Suppose you need to keep words together on the same line in a Microsoft Word document. This happens sometimes, when I write stories. I&';m currently writing a book on Personal Electric Vehicles. For each vehicle, I note the maximum speed. I write this speed in both mph and km/h. I write it as 10 mph (16 km/h), with a space between the amount and the units. I could just remove the space and end this part of the discussion. But, I think it&';s easier to read with the space.
If the amount and the unit are near the end of the line, the amount might end up on one line and the units on the next. Then, it&';s harder to read. So, I delete the space and enter a non-breaking space instead. To do that, I hold down the ctrl key while hitting the space bar.
But, suppose that I had a hyphenated word near the end of a line. Word might split that hyphenated word, so that part of it is on one line and the rest is on the next line. If I don&';t want that to happen for that particular word, I can delete the hyphen and replace it with a non-breaking hyphen. You do this by holding down ctrl while typing a hyphen.
That&';s a pretty easy fix. And, it works well for my books and other documents.

But, what about websites? Well, there are non-breaking spaces and hyphens for your website. You can type   for a Non-Breaking SPace. You can type ‑ for a non-breaking hyphen.
Before you write that down, I&';m going to suggest that you might want to use a different method to achieve these results. Why? Because of character width. Non-breaking spaces and hyphens may not be the width that you want them to be. There are other non-breaking characters which might be what you want. However, the width of these characters depends on which font you&';re using. If you only ever use one font on your webpage, even including both headings and text, this might be a solution for you. All HTML non-breaking characters can be found on my webpage - https://stubbart.com/computer_consulting/unicode/unicode_spaces.html.
One better solution is to use the <pre>HTML tag. <pre>keep this together</pre> will keep that text together on line line. <pre> also keeps double spaces and line breaks where you have them. So, this might not be the solution that you&';re looking for. And, if what you have in <pre> gets longer than the available width of a line, it makes your website look funky.
Rather than using <pre>, you can use the white-space style attribute. <p style="white-space:normal">Let this line break</p> is the default. Rather than normal, you can specify nowrap. That will keep your text on the same line. pre will keep your extra spaces and line breaks. Other than any line breaks within the text, the text will stay on one line. white-space:pre works the same way as <pre>.
<pre> and white-space:pre are the best solutions for keeping words together on a webpage. Keep a watch on how much are keeping together, so that your webpage doesn&';t look funky, even when viewed on a phone. Another alternative is to not bother and let your lines break. That&';s up to you.
But, if you do want to keep your text together, the best part about using <pre> or white-space:pre is that you don&';t have to remember to type ‑ for a non-breaking hyphen.