How can I prevent having just one hanging word on a new line in an HTML element?

Question

I'm building a simple webpage with some marketing content. One thing I don't like is that if a line of text is too long, it will wrap onto the next line, which is fine, but it often wraps in such a way that there is only one word on the new line, which is just bad news from a design standpoint.

Such and such doesn't have to be difficult. Such and such product makes it
easy

What can I do to dynamically ensure at least two words on each hanging line?

Such and such doesn't have to be difficult. Such and such product makes
it easy

*"which is just bad news from a design standpoint."*...I dispute your contention. If a line wraps to just a single word so be it...a least it looks natural rather than forcing an unnatural break. — Paulie_D, Aug 12 '15 at 20:52
@Paulie_D - fwiw, it's common in the realm of print media to obsess on this stuff.. page layout applications (well, back when I used them it was Quark XPress and Aldus/Adobe PageMaker) like InDesign have built in features to aid in the prevention of "widows" / "orphans" .. — bkwdesign, Mar 25 '16 at 05:53
Yeah...but this isnt print...it's the web. https://developer.mozilla.org/en-US/docs/Web/CSS/widows — Paulie_D, Mar 25 '16 at 09:54
I agree, having a hanging word is undesirable. "It's the web" is not a great excuse IMO. — Ryenski, Feb 28 '17 at 23:47
Possible duplicate of [How can I avoid one word on the last line with CSS?](https://stackoverflow.com/questions/4823722/how-can-i-avoid-one-word-on-the-last-line-with-css) — clickbait, Aug 10 '18 at 00:41
It looks like [CSS Fragmentation Module Level 3](https://drafts.csswg.org/css-break-3/) might have a proper fix for this. — Richard Smith, May 15 '21 at 14:35

score 46 · Accepted Answer · edited Aug 03 '18 at 15:32

46

The simple solution is to use a non-breaking space between the last two words at the end of a paragraph.

&nbsp;

<p>Such and such doesn't have to be difficult. Such and such product makes it&nbsp;easy</p>

This could get tedious if you have a lot of content and especially if it is business controlled. In that case you may be able to find a library or write a solution that automatically inserts the non-breaking space between the last two words of every paragraph for you.

Try this: https://matthewlein.com/tools/widowfix

edited Aug 03 '18 at 15:32

e-cloud

4,331
1
23
37

answered Aug 12 '15 at 20:15

koga73

964
9
16

2

similarly, you could wrap the last two words in a `` tag, e.g. – jrz Jul 12 '17 at 19:25
1

@Jon z - `` is obsolete - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/nobr – tim-montague Sep 24 '19 at 14:50

Hayden Schiff · Answer 2 · 2017-06-07T20:09:53.083

16

EDIT: The best answer is much cleaner -- you should probably use that instead. I'm leaving my answer up because it does work and it has some value for weird cases (e.g. if you're using a dash instead of a space, if you don't want to use  , etc).

Here's a neat little solution. Create a CSS class like this:

.nobr { white-space:nowrap; }

Any element with the class "nobr" will not be allowed to wrap white-space (spaces, tabs, etc) onto new lines. So just surround the last two words of your text with a span.nobr.

<p>Such and such doesn't have to be difficult. Such and such product makes <span class="nobr">it easy</span></p>

edited Jun 07 '17 at 20:09

answered Aug 12 '15 at 20:14

Hayden Schiff

3,280
19
41

or he could just put in a
tag – Rachel Gallen Aug 12 '15 at 20:15
10

A `
` tag would _force_ the paragraph to break before the last two words, which isn't what he wants. Doing that, you might end up with a line with one word above the line with the last two words, and that'd be worse. – Hayden Schiff Aug 12 '15 at 20:17

score 5 · Answer 3 · answered Sep 26 '18 at 09:35

5

I would use a <nobr>last two words.</nobr> tag.

This also gives the benefit of not cutting off any HTML flourishes you may be doing, eg:

<b>&ldquo;</b>Here's a big statement I don't want <nobr>cutting off<b>&rdquo;</b>.</nobr>

answered Sep 26 '18 at 09:35

Kevin Sedgley

1,049
1
11
22

1

remains supported by every browser, but as a precaution include the following in your style sheet: nobr { white-space:nowrap; } – Loren Nov 26 '19 at 02:07

score 1 · Answer 4 · answered Jul 17 '23 at 06:02

In CSS, you can use text-wrap: pretty for this.

p {
  text-wrap: pretty;
}

Live demo: https://codepen.io/bramus/pen/oNQqMXv

Note that text-wrap: pretty is only supported in Chrome 117 (current Canary) at the time of posting, with other browsers hopefully following soon.

Also see https://www.youtube.com/clip/UgkxMs0HXf1mwkTZQRrSwtWPxrmVsSHFmN8X, showing how it behaves and how it compares to text-wrap: balance.

score 0 · Answer 5 · answered May 10 '21 at 09:45

0

You can use the   HTML entity or one of the non-breaking-space ASCII character.

Here is one :

answered May 10 '21 at 09:45

Neekobus

1,870
1
14
18

How can I prevent having just one hanging word on a new line in an HTML element?

5 Answers5

Linked