如何在CSS的最后一行避免使用一个单词？

Question

假设文本在HTML页面上显示如下（只有一个单词太长而无法放在一行上）：

Lorem ipsum dolores amet foo
bar

如何用CSS避免最后一个单词出现在最后一行，并强制两个（或更多）？

Lorem ipsum dolores amet
foo bar

Answer 1

我不认为你可以在纯CSS中做到这一点。

您必须在最后两个单词之间放置一个不间断的空格：

foo bar

或者将最后两个单词放入span：

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

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

Answer 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 "):void 0)})}

你可以通过这样做来实现它

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

现在，对于任何带有corrected类的标签，你永远不会有任何单词。

如果需要，您也可以使用jQuery。

$(".corrected").buddySystem()

查看所有可能性的链接。

Answer 4

不能用CSS完成，但Shaun Inman写了一段非常有用的Javascript来帮助解决这个问题：

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

它是一个Wordpress插件，但有很多非Wordpress克隆。

Answer 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>