Question

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

Lorem ipsum dolores amet foo
bar

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

Lorem ipsum dolores amet
foo bar

Answer 1

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

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

foo&nbsp;bar

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

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

Answer 2

刚刚编写了这个无依赖的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()

查看所有可能性的链接。

Answer 3

我不认为它可以单独用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 4

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

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

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

Answer 5

If JavaScript is an option, one can use typogr.js, a JavaScript "typogrify" implementation. This particular filter is called 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>

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

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

6 个答案: