tengo esta linea:
Welcome to the nicest home 🚀
Esta línea está dentro de un ancho de respuesta de ancho div flexible. Cuando with es lo suficientemente pequeño, esto sucede
Welcome to the
nicest home
🚀
¿Hay alguna manera con la que pueda obligar a home y 🚀 a estar siempre juntos? Así que en el ejemplo obtendría
Welcome to the
nicest
home 🚀
Como se sugiere en los comentarios, un espacio que no se rompa hará el truco.
Para incluirlo en el HTML, solemos utilizar el código de símbolo:
(Arrastre la esquina del cuadro para cambiar el tamaño y probar el ejemplo)
div {
display: block;
resize: both;
overflow: hidden;
border: 1px solid #000;
}
<div>Welcome to the nicest home 🚀</div>
Un método para lograr esto sería reemplazar el último espacio en blanco encontrado en la cadena con una entidad de espacio que no se rompa, .
Puedes usar JS para hacer esto con todos los elementos que decores con una clase determinada:
document.querySelectorAll('.no-orphans').forEach(el => {
el.innerHTML = el.innerHTML.replace(/ (?=[^ ]*$)/i, " ");
});
p { width: 100px; }
<p>Original:<br />Welcome to the nicest home 🚀</p>
<p class="no-orphans">Corrected:<br />Welcome to the nicest home 🚀</p>
La única advertencia aquí es que el final del contenido dentro del elemento .no-orphans no puede ser un elemento HTML, solo un node de texto.