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
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>
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>“</b>Here's a big statement I don't want <nobr>cutting off<b>”</b>.</nobr>
The simple solution is to use a non-breaking space between the last two words at the end of a paragraph.
<p>Such and such doesn't have to be difficult. Such and such product makes it 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