¿Cómo puedo evitar una palabra en la última línea con CSS?

Question

Supongamos que un texto se presenta de la siguiente manera en una página HTML (sólo una palabra demasiado larga para caber en una línea):

Lorem ipsum dolores amet foo 
bar 

¿Cómo se puede evitar con CSS que la última palabra aparece en la última línea, y fuerza dos (o más)?

Lorem ipsum dolores amet 
foo bar 

Answer 1

No creo que pueda hacer esto en CSS puro.

Usted tendría que o bien poner un espacio de no separación entre las dos últimas palabras:

foo bar 

o poner las dos últimas palabras en un span:

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

Answer 2

No puede ser hecho con CSS, pero Shaun Inman escribió un poco de Javascript muy útil para ayudar con esto hace un tiempo:

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

Es un plugin de Wordpress, pero hay muchos clones que no son de Wordpress.

Answer 3

acabo de escribir este fragmento JS libre de la dependencia que va a resolver este mismo problema

https://github.com/ajkochanowicz/BuddySystem

En esencia, este es el código fuente

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)})} 

y se puede poner en práctica que al hacer esto

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

Ahora usted nunca tendrá una palabra por sí mismo para cualquier etiqueta con la clase corrected.

También puede usar jQuery si lo desea.

$(".corrected").buddySystem()

consulte el enlace para todas las posibilidades.

Answer 4

No creo que se pueda hacer solo en CSS, pero esto es lo que se me ocurrió para resolver el problema de una palabra por línea. Reemplazará los últimos n espacios con un espacio sin interrupción para todos los elementos coincidentes.

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

Si JavaScript es una opción, se puede utilizar typogr.js, un JavaScript "typogrify" aplicación. Este filtro en particular se llama 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>