Question

Views

I have this line:

Welcome to the nicest home 🚀

This line is inside a flex div width responsive width. When with is small enough, this happens

Welcome to the
nicest home 
🚀

Is there a way with which I can force home and 🚀 to be always together? So in the example I would get

Welcome to the
nicest
home 🚀

almost 4 years ago · Santiago Trujillo

As suggested in the comments, a non-breaking space will do the trick.

To include it in the HTML, we usually use the symbol code:  

(Drag the corner of the box to resize and test the example)

div {
  display: block;
  resize: both;
  overflow: hidden;
  border: 1px solid #000;
}

<div>Welcome to the nicest home&nbsp;🚀</div>

almost 4 years ago · Santiago Trujillo Report

Answer question

Accepted Answer · 2022-09-30T13:30:34.612Z

One method to achieve this would be to replace the last whitespace found in the string with a non-breaking space entity,  .

You can use JS to do this to all elements you decorate with a given class:

document.querySelectorAll('.no-orphans').forEach(el => {
  el.innerHTML = el.innerHTML.replace(/ (?=[^ ]*$)/i, "&nbsp;");
});

p { width: 100px; }

<p>Original:<br />Welcome to the nicest home 🚀</p>

<p class="no-orphans">Corrected:<br />Welcome to the nicest home 🚀</p>

The only caveat here is that the end of the content within the .no-orphans element cannot be a HTML element, only a text node