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

Question

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

可能吗？

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

在您编辑问题后，我了解到您实际上不希望在一个词后出现文本中断。我的解决方案是 select 前两个词，用 class 的跨度将它们包裹起来，不要让该文本中断：

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

Answer 4

这也行得通（*同样的情况 - 你不希望在一个单词后出现文本中断。我的解决方案是 select 前两个单词，用 class 并且不要让该文本中断):

<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"></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/

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

Javascript / Forcing a line break after the point if I have one word

javascript

jquery

css

line-breaks