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

Suppose a text shows up as follows on an HTML page (just one word too long to fit on one line):

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

Lorem ipsum dolores amet foo
bar

How can one avoid with CSS that the last word appears on the last line, and force two (or more)?

如何用CSS避免最后一个单词出现在最后一行,并强制两个(或更多)?

Lorem ipsum dolores amet
foo bar

5 个解决方案

#1

I don't think you can do this in pure CSS.

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

You would have to either put a non-breaking space in between the last two words:

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

foo&nbsp;bar

or put the last two words into a span:

或者将最后两个单词放入一个范围:

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

#2

I don't think it can be done in CSS alone but this is what I came up with to solve the one word per line problem. It will replace the last n spaces with a non breaking space for all the matched elements.

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

Just wrote this dependency-free JS snippet that will solve this very problem

刚写了这个无依赖的JS片段,它将解决这个问题

https://github.com/ajkochanowicz/BuddySystem

Essentially this is the source code

基本上这是源代码

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

and you can implement it by doing this

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

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

Now you'll never have a word by itself for any tags with the corrected class.

现在,对于任何带有更正类的标签,您将永远不会有任何单词。

You can also use jQuery if you want.

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

$(".corrected").buddySystem()

Check out the link for all possibilities.

查看所有可能性的链接。

#4

Can't be done with CSS, but Shaun Inman wrote a very useful bit of Javascript to help with this a while ago:

无法用CSS完成,但Shaun Inman在前一段时间写了一篇非常有用的Javascript来帮助解决这个问题:

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

It's a Wordpress plugin, but there are plenty of non-Wordpress clones around.

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

#5

If JavaScript is an option, one can use typogr.js, a JavaScript "typogrify" implementation. This particular filter is called Widont.

如果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>

#1