7

What I mean with orphans word is a single word on a line. Possible with help of CSS to avoid any line with only one word?

For example SERUM is an orphand word:

ECSTASY OF EXISTENCE FIRMING ANTIOXIDANT BODY
SERUM

It should look like this instead

ECSTASY OF EXISTENCE FIRMING ANTIOXIDANT
BODY SERUM

enter image description here

Isak La Fleur
  • 4,428
  • 7
  • 34
  • 50
  • 1
    CSS isn't a scripting language, so you can't implement that kind of logic. The best you could do would be to wrap two or more words in an element and not let it wrap. – isherwood Dec 13 '21 at 17:55
  • So what you're actually referring to is called a runt in print, not an orphan which deals with page breaks. Your only real options are to limit the width of the container or add horizontal padding using magic numbers that will force a second word to join your runt at the widest screen size and make sure that the container for an individual item never goes beyond that width. It's simple with CSS Grid, if you share some code someone can recommend how you could manipulate it to fit what you're looking for. – JHeth Dec 13 '21 at 17:55
  • 1
    But I gave up on this kind of pixel-perfection years ago. The modern web flexes and flows. Hit the low-hanging fruit and embrace it as it is. – isherwood Dec 13 '21 at 17:56
  • 1
    Add ` ` between the last two words – j08691 Dec 13 '21 at 17:58
  • An idea is to add padding to the left and the right side of the text container to be sure that you have less text on the first line. Apart of that you cannot make it only with CSS. – Azu Dec 13 '21 at 17:59
  • With only CSS it is not possible, for this case the best solution will be to reduce the text container width, try out a 80% of the actual width for the expected result. – Ginés Ruiz Dec 13 '21 at 18:03
  • 1
    Oh, man... `orphan-words: avoid;` would be so much more useful than `hyphens: auto;` to me at least. And seems like it would be way easier to implement. Sadly it does not exist at the moment. – squarecandy Nov 08 '22 at 00:22

2 Answers2

10

A quick and easy way to prevent two words from breaking is to insert a non breaking space   between the words

ECSTASY OF EXISTENCE FIRMING ANTIOXIDANT BODY SERUM

It won't be visible on the front end but those words will stay together even if there enough space for just one of them.

<h2>ECSTASY OF EXISTENCE FIRMING ANTIOXIDANT BODY&nbsp;SERUM</h2>
Junky
  • 958
  • 7
  • 17
  • Junky,Thank you for your reply, the issue with this solution is that when I send the order to an external applicaiton that for example print out this text on a piece of papper (then   will appears on the paper, right?) – Isak La Fleur Dec 13 '21 at 18:31
  • 1
    No it shouldn't print. I updated my answer with a code snippet for you to test. – Junky Dec 13 '21 at 18:42
  • Amazing Junky! Thank you! – Isak La Fleur Dec 13 '21 at 19:45
  • This is definitely very useful in some situations. But the problems with this and the other answer are the same: If you automated this, it could break mobile layouts if the last two words are very long. If you don't automate it, it's difficult to train non-technical editors how to implement it correctly. We've done some funky server level stuff, like look at the string length and if it's longer than N characters long, find the space character closest to the middle and replace it with a `
    `. But that approach has drawbacks too.     – squarecandy Nov 08 '22 at 00:30
2

You can do it with white-space: nowrap

span {
  white-space: nowrap;
}
<h2>ECSTASY OF EXISTENCE FIRMING ANTIOXIDANT <span>BODY SERUM</span></h2>
Ahmad
  • 816
  • 2
  • 9
  • 15