Jak mogę uniknąć jednego słowa na ostatnim wierszu z CSS?

Question

Załóżmy, że tekst przedstawia się następująco na stronie HTML (tylko jedno słowo zbyt długi, aby zmieścić się na jednej linii):

Lorem ipsum dolores amet foo 
bar 

Jak można uniknąć z CSS, że ostatnie słowo w ostatnim wierszu i wymusić dwa (lub więcej)?

Lorem ipsum dolores amet 
foo bar 

Answer 1

Nie sądzę, że można to zrobić w czystym CSS.

Trzeba by albo umieścić non-breaking space w między ostatnimi dwoma słowami:

foo bar 

lub umieścić dwa ostatnie słowa na span:

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

Answer 2

nie może być Sporządzono przy użyciu CSS, ale Shaun Inman napisał bardzo przydatny fragment Javascript, aby pomóc w tym jakiś czas temu:

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

Jest to wtyczka do Wordpressa, ale w okolicy jest mnóstwo klonów innych niż Wordpress.

Answer 3

prostu napisał tę zależność wolne JS fragment, który rozwiąże ten problem bardzo

https://github.com/ajkochanowicz/BuddySystem

Zasadniczo jest to kod źródłowy

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

i można wdrożyć go, wykonując tę ​​

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

Teraz nigdy nie będziesz mieć sam dla każdego tagu z klasą corrected.

Możesz także użyć jQuery, jeśli chcesz.

$(".corrected").buddySystem()

sprawdzić link do wszystkich możliwości.

Answer 4

Nie sądzę, że można to zrobić tylko w CSS, ale właśnie to wymyśliłem, aby rozwiązać problem z jednym słowem w linii. Zastąpi on ostatnie n spacjami bez łamania dla wszystkich dopasowanych elementów.

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

Jeśli obsługa JavaScript jest opcją, można użyć typogr.js, a JavaScript "typogrify" realizacji. Ten konkretny filtr nosi nazwę 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>