Как я могу избежать одного слова в последней строке с помощью CSS?

Предположим, что на странице HTML отображается текст, показанный на одной странице (только одно слово слишком длинное, чтобы оно помещалось в одну строку):

Lorem ipsum dolores amet foo
bar

Как можно избежать CSS, чтобы последнее слово появилось в последней строке и заставило два (или более)?

Lorem ipsum dolores amet
foo bar

Ответ 1

Я не думаю, что вы можете сделать это в чистом CSS.

Вам нужно будет либо поставить неразрывное пространство между двумя последними словами:

foo&nbsp;bar

или поместите последние два слова в span:

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

Ответ 2

Я не думаю, что это можно сделать только в CSS, но это то, что я придумал, чтобы решить проблему с одним словом на строку. Он заменит последние n пробелов слоем без разрыва для всех согласованных элементов.

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

Ответ 3

Просто написал этот бесплатный фрагмент JS без зависимостей, который решит эту проблему

https://github.com/ajkochanowicz/BuddySystem

По существу это исходный код

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&nbsp;"):void 0)})}

и вы можете реализовать его, выполнив это

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

Теперь у вас никогда не будет отдельного слова для любых тегов с классом corrected.

Вы также можете использовать jQuery, если хотите.

$(".corrected").buddySystem()

Проверьте ссылку для всех возможностей.

Ответ 4

Невозможно сделать с CSS, но Shaun Inman написал очень полезный бит Javascript, чтобы помочь с этим некоторое время назад:

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

Это плагин Wordpress, но есть много клонов не-Wordpress.

Ответ 5

Если JavaScript является опцией, можно использовать typogr.js, реализацию JavaScript "typogrify". Этот конкретный фильтр называется 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>