Come posso evitare una parola sull'ultima riga con CSS?

Question

Supponiamo un testo si presenta come segue in una pagina HTML (solo una parola troppo tempo per stare su una sola riga):

Lorem ipsum dolores amet foo 
bar 

Come si può evitare con i CSS che l'ultima parola appare sull'ultima riga, e forza due (o più)?

Lorem ipsum dolores amet 
foo bar 

Answer 1

Non penso che si possa fare questo in puro CSS.

Si dovrà o mettere uno spazio unificatore tra le ultime due parole:

foo bar 

o mettere le ultime due parole in un span:

<span style="white-space: nowrap">foo bar</span> 

Answer 2

non può essere fatto con CSS, ma Shaun Inman ha scritto un po 'di Javascript molto utile per aiutare un po' di tempo fa:

http://www.shauninman.com/archive/2006/08/22/widont_wordpress_plugin

È un plug-in per Wordpress, ma ci sono molti cloni non-Wordpress in giro.

Answer 3

appena scritto questo frammento JS senza dipendenza che possa risolvere questo problema molto

https://github.com/ajkochanowicz/BuddySystem

Essenzialmente questo è il codice sorgente

var buddySystem=function(e){var n=[],r=[] 
n=e.length?e:n.concat(e),Array.prototype.map.call(n,function(e){var n=String(e.innerHTML) 
n=n.replace(/\s+/g," ").replace(/^\s|\s$/g,""),r.push(n?e.innerHTML=n.replace(new RegExp("((?:[^ ]*){"+((n.match(/\s/g)||0).length-1)+"}[^ ]*) "),"$1 "):void 0)})} 

ed è possibile attuarlo in questo modo

objs = document.getElementsByClassName('corrected'); 
buddySystem(objs); 

Ora non avrai mai un parola da sola per tutti i tag con la classe corrected.

È anche possibile utilizzare jQuery se lo si desidera.

$(".corrected").buddySystem()

controllare il link per tutte le possibilità.

Answer 4

Non penso che possa essere fatto solo nei CSS, ma questo è quello che mi è venuto in mente per risolvere il problema di una parola per linea. Sostituirà gli ultimi n spazi con uno spazio non interruttivo per tutti gli elementi abbinati.

https://jsfiddle.net/jackvial/19e3pm6e/2/

function noMoreLonelyWords(selector, numWords){ 

     // Get array of all the selected elements 
     var elems = document.querySelectorAll(selector); 
     var i; 
     for(i = 0; i < elems.length; ++i){ 

     // Split the text content of each element into an array 
     var textArray = elems[i].innerText.split(" "); 

     // Remove the last n words and join them with a none breaking space 
     var lastWords = textArray.splice(-numWords, numWords).join("&nbsp;"); 

     // Join it all back together and replace the existing 
     // text with the new text 
     var textMinusLastWords = textArray.join(" "); 
     elems[i].innerHTML = textMinusLastWords + " " + lastWords; 
     } 
    } 

    // Goodbye lonely words 
    noMoreLonelyWords("p", 3); 

Answer 5

Se JavaScript è un'opzione, si può usare typogr.js, un JavaScript "typogrify" attuazione. Questo particolare filtro si chiama Widont.

<script src="https://cdnjs.cloudflare.com/ajax/libs/typogr/0.6.7/typogr.min.js"></script> 
<script> 
document.body.innerHTML = typogr.widont(document.body.innerHTML); 
</script> 
</body>