如何在 CSS 的最后一行避免一个单词？答案

【问题标题】：How can I avoid one word on the last line with CSS?如何在 CSS 的最后一行避免一个单词？
【发布时间】：2020-02-19 13:09:17
【问题描述】：

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

Lorem ipsum dolores amet foo
bar

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

Lorem ipsum dolores amet
foo bar

【问题讨论】：

How can I prevent having just one hanging word on a new line in an HTML element?的可能重复

标签： css

【解决方案1】：

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

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

foo&nbsp;bar

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

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

【讨论】：

+1。这种事情也可以很容易地用一点 javascript 自动化。

【解决方案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 sn-p 就可以解决这个问题

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

查看链接了解所有可能性。

【讨论】：

我怎样才能让这个解决方案不仅替换最后一个空格，而且替换两个或多个最后一个单词之间的所有空格？
@TheStoryCoder 查看我上面的解决方案。我已经为它添加了一个指向 JS Fiddle 的链接。

【解决方案4】：

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

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

这是一个 Wordpress 插件，但周围有很多非 Wordpress 克隆。

【讨论】：

Shaun 的这篇文章是 2006 年的，在我看来有点老了。
年龄无关紧要——它是一种非常简单的 Javascript 模式，在设计时就可以使用，并且一直使用到今天。
不明白为什么这个答案被否决了。尽管已经有几年了，但 Shaun 的代码仍然非常重要。仅仅因为它的年龄而忽视它的有效性似乎有点荒谬。

【解决方案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>

【讨论】：

我想知道它是否与同名的WordPress插件有任何关系。（两者的名字都不好——这些东西根本不是寡妇。）
看起来 Typgrify 引用了 Shaun Inman 的实现作为原始实现，所以......我想我知道该指责谁了。

【解决方案6】：

如果您想在 wordpress 中执行此操作，可以使用一些新手 php

function add_nobr_spans($string) {
  $words = explode(' ', $string);
  if (count($words) < 3){
    return $string;
  }
  $last_word = array_pop($words);
  while ($last_word == "") {
    $last_word = array_pop($words);
  }
  if (preg_match('#[<>]+#is', $last_word)) {
    return $string;
  }
  $almost_last_word = array_pop($words);
  if (preg_match('#[<>]+#is', $almost_last_word)) {
    return $string;
  }
  array_push($words, "<span class='nobr'>".$almost_last_word." ".$last_word."</span>");
  return implode(' ', $words);
}
function no_widows_for_end_tag($input, $end_tag){
  $split_stuff = explode($end_tag, $input);
  $split_stuff = array_map('add_nobr_spans', $split_stuff);
  $result = implode($end_tag, $split_stuff);
  return $result;
}
function no_widows($string) {
  $string = no_widows_for_end_tag($string, "</p>");
  $string = no_widows_for_end_tag($string, "</h3>");
  $string = no_widows_for_end_tag($string, "</h4>");
  $string = no_widows_for_end_tag($string, "</h5>");
  return $string;
}

【讨论】：