CSS. prevent line in text to only contain one word

Question

Quick question,

Can't find any good solution for this. On a site i have a lot of paragraphs. Its responsive which sometimes makes the last line in a text to only have one word.

Can you some how force it to have at least 2 words?

Answer 1

Unfortunately this isn't possible with CSS. However, you could use a much easier solution and just replace the last whitespace between the words with   (The best approach would be with a serverside language like PHP but you could also use Javascript).

Example:

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna&nbsp;aliqua.</p>

http://jsfiddle.net/h1bhuexL/

Answer 2

You can't. This does NOT fall under CSS' jurisdiction since it cannot detect substrings. This is either a job for JS or the pre-processor (PHP etc).

If you know the specific width of CSS:

element { width: 250px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }

In JS, simply split the line with ' ' (space) and display only the first entry of the array it creates.

var str = "How are you doing today?";
var res = str.split(" ");
document.getElementById("demo").innerHTML = res[0];

Regards.