Minimum-words-per-line-property

Hi,
As you can see on this picture

I have these single words in my text.

Here the page: https://christophgrothe.github.io/home_plants/
(It’s at the end of the page).

You don’t see them in every size but if you play with the size of your screen they will appear. I have been trying different things to get rid of them (I mean, to force my text to have at least a bit more words per line) but I don’t get it.

I have tried putting the text in one single p-element (like it is on github) as well as in a container with a lot of p’s (that’s what I do now) . I use media queries. I have tried manipulating the width. I’ve tried word-wrap and overflow-wrap.

What I would need is something like a “minimum-words-per-line”-property…
Or does anybody have another solution?

Best wishes,
Chris

Suggest do not center align text unless it is a heading. Use align: left; or align: justify; the former preferred. A slightly larger font and maybe a slightly narrowed container will help.

Not available. CSS does not know how to handle words, only text nodes.

1 Like