Javascript / 如果我有一个单词，则在该点之后强制换行

Question

如图所示，当我在 dot 后面有一个单词时，我会强制换行，这是出于审美问题，但尤其是出于良好阅读的考虑。

有可能吗？

http://i.stack.imgur.com/EkcuR.jpg

Answer 1

这个怎么样：

$('p').html($('p').text().replace(/\.\s/g, '.<br>'));

这里是它的 JSBin 演示： http://jsbin.com/sapate

Answer 2

在 css 中，我们目前没有任何基于单词的伪元素。最好有类似的东西：

section div::first-word {
  page-break-after: always;
}

我认为一个解决方案是用 jquery 来做到这一点：

<script>
$(document).ready(function($) {
    $('span').each(function() {
        var word = $(this).html();
        var index = word.indexOf(' ');
        if(index == -1) {
            index = word.length;
        }
        $(this).html('<span class="first-word">' + word.substring(0, index) + '</span><br/>' + word.substring(index, word.length));
    });
});
</script>
<style>
    section{
        width:500px;
        float:left;
        font:14px;
    }
    .first-word { 
        font-style:italic;
    }
</style>

<section>
<span>
Lorem ipsum dolor sit amet, in luctus, at eros nec turpis, malesuada massa vel purus nonummy, lorem quis neque.
</span>
<span>
Neque ac, ut nunc dui mattis sollicitudin arcu, sed sollicitudin scelerisque enim a. 
</span>
<span>
Praesent sit urna ipsum, tortor integer elit in convallis pulvinar mauris.  
</span>
</section>

http://jsfiddle.net/MadalinaTn/n7zpuLbo/5/

Answer 3

这也有效（*同样的情况 - 你不想在一个单词之后出现文本中断。我的解决方案是选择前两个单词，用一个类将它们包装起来，不要让那个文本中断）：

<style>
    section{
        width:500px;
        float:left;
        font:14px;
    }
    .first-two-words2 { 
        font-style:italic;
        white-space: nowrap;
    }
</style>
<script>
$(document).ready(function($) {
$('span').html(function (i, html) {
    return html.replace(/(\w+\s\w+)/, '<span class="first-two-words2">$1</span>')
});
});
</script>
<section>
<span>
Lorem ipsum dolor sit amet, in luctus, at eros nec turpis, malesuada massa vel purus nonummy, lorem quis neque,lorem quis neque, lorem quis zz.
</span>
<span>
Neque ac, ut nunc dui mattis sollicitudin arcu, sed sollicitudin scelerisque enim a. 
</span>
<span>
Praesent sit urna ipsum, tortor integer elit in convallis pulvinar mauris.  
</span>
</section>

http://jsfiddle.net/MadalinaTn/me76t9vv/1/

Answer 4

在您编辑问题后，我了解到您实际上不希望在一个单词后出现文本中断。我的解决方案是选择前两个单词，用一个带有类的 span 将它们包装起来，不要让那个文本中断：

<style>
    section{
        width:500px;
        float:left;
        font:14px;
    }
    .first-two-words { 
        font-style:italic;
        white-space: nowrap;
    }
</style>
<script>
$(document).ready(function($) {
    $('span').each(function() {
        var words = $(this).html();
        var n = words.split(" ");   
        var i = n[0]+n[1];
        index = i.length + 1;
        $(this).html('<span class="first-two-words">' + words.substring(0, index) + '</span>' + words.substring(index, words.length));
    });
});
</script>
<section>
<span>
Lorem ipsum dolor sit amet, in luctus, at eros nec turpis, malesuada massa vel purus nonummy, lorem quis neque,lorem quis neque, lorem quis zz.
</span>
<span>
Neque ac, ut nunc dui mattis sollicitudin arcu, sed sollicitudin scelerisque enim a. 
</span>
<span>
Praesent sit urna ipsum, tortor integer elit in convallis pulvinar mauris.  
</span>
</section>

http://jsfiddle.net/MadalinaTn/btngqcpq/1/