Come posso evitare di avere una sola parola appesa su una nuova riga in un elemento HTML?

Question

Sto costruendo una semplice pagina Web con alcuni contenuti di marketing. Una cosa che non mi piace è che se una riga di testo è troppo lunga, si avvolgerà sulla riga successiva, che è fine, ma spesso si avvolge in modo che ci sia solo una parola sulla nuova riga , che è solo una cattiva notizia dal punto di vista del design.

Tale e così non deve essere difficile. Tale e tale prodotto lo rende
facile

Cosa posso fare per garantire dinamicamente almeno due parole su ciascuna linea sospesa?

Tale e così non deve essere difficile. prodotto così e così rende
è facile

Answer 1

La soluzione semplice consiste nell'utilizzare uno spazio non interruttivo tra le ultime due parole alla fine di un paragrafo.

  

---

<p>Such and such doesn't have to be difficult. Such and such product makes it&nbsp;easy</p> 

Questo potrebbe diventare noioso se si dispone di un sacco di contenuti e soprattutto se si tratta di imprese controllate. In tal caso potresti essere in grado di trovare una libreria o scrivere una soluzione che inserisca automaticamente lo spazio non interruttivo tra le ultime due parole di ogni paragrafo.

Prova questo: http://matthewlein.com/widowfix/

Answer 2

EDIT: Il best answer è molto più pulito - probabilmente si dovrebbe usare che invece. Sto lasciando la mia risposta perché funziona e ha qualche valore per casi strani (ad esempio se stai usando un trattino invece di uno spazio, se non vuoi usare  , ecc.).

---

Ecco una soluzione piccola e accurata. Creare una classe CSS come questo:

.nobr { white-space:nowrap; } 

Qualsiasi elemento con la classe "nobr" non sarà consentito per avvolgere white-space (spazi, tabulazioni, ecc) su nuove linee. Quindi racchiudi le ultime due parole del tuo testo con un span.nobr.

<p>Such and such doesn't have to be difficult. Such and such product makes <span class="nobr">it easy</span></p>