Get rid of one-letter word at the end of each line

Question

I'm looking for a HTML/CSS solution to get rid of one-letter words in each line in paragraph. In my home country there is grammar rule not to leave one-letter words but unfortunately I haven't found any CSS property to deal with it.

Example of incorrect paragraph:

My name is John Doe and I
look for a solution

Example of grammaticaly correct paragraph:

My name is John Doe and
I look for a solution'

I don't understand, both examples have the same amount of words — symlink, Apr 04 '20 at 15:39
Could you provide some more details, like your HTML structure and your CSS applied? — Vasilis G., Apr 04 '20 at 15:40
i dont believe this can be made with just HTML and Css, it can be done via javascript though. you HTML structure is needed however. — Safi Habhab, Apr 04 '20 at 15:43

score 0 · Answer 1 · answered Apr 04 '20 at 15:46

I don't think that's possible with HTML and CSS. But if it must be done you can use <br/> to create it. Like this:

<p>
    My name is John Doe and
    <br/>
    I look for a solution
</p>

Try Google next time. I found something similar as your question: How can I avoid one word on the last line with CSS?

score 0 · Answer 2 · answered Apr 04 '20 at 16:22

Ok, so I did a little bit more reasearch and found that HTML allows for non-breaking space (&nbsp) so basically I had to insert "&nbsp" into HTML e.x. :

My name is John Doe and&nbspI look for a solution

To avoid inserting it manually into HTML (which is quite large) I wrote JS function for that:

function nbspInsert (sentence) {
    let inputArray = sentence.split(" ");
    let output = "";

    for (let i = 0; i < inputArray.length; i++) {
        if (i == inputArray.length) {
            output += inputArray[i];
        }

        if (inputArray[i].length > 2) {
            output += inputArray[i];
            output += " ";
        }

        else {
            output += inputArray[i];
            output += "&nbsp";
        }
    }

    return output;
}

Posting this answer to help anyone who will have same question in the future.

Cheers!

score 0 · Answer 3 · answered Apr 04 '20 at 17:51

JavaScript Solution:

const setup = ()  => {
  const pList = document.querySelectorAll('p');
  pList.forEach(p => noMoreLonelyWords(p));
};

const clearWordBreaks = (target) => target.textContent = target.textContent.replace(/\u00a0/g, ' ');
const noMoreLonelyWords = (target) => {
  let textArray = target.textContent.split(' ');
  let newTextArray = [];
  textArray.forEach((word, i, list) => {
    let textEntry = '';
    if(word.length === 1)
      textEntry = word + '\xa0';
    else
      textEntry = word + ' ';
    newTextArray.push(textEntry);
  });
  target.textContent = newTextArray.join('');
};
const updateWordBreaks = (target) => {
  clearWordBreaks(target);
  noMoreLonelyWords(target);
};

//load
window.addEventListener('load', setup);

<p>Lorem ipsum dolor sit amet, consectetur adipiscing I elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat I nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cill I um dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

Good luck

Get rid of one-letter word at the end of each line

3 Answers3