Javascript / Forcing A Line Break After The Point If I Have One Word

As in the picture, I would force a line break when I have one word after the dot, for a aesthetic issue, but especially as a matter of good reading. It's possible? http://i.stack.i

Solution 1:

How about this:

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

And here's the JSBin demo for it: http://jsbin.com/sapate

Solution 2:

In css we currently don't have any word-based pseudo elements. It would be nice to have something like:

sectiondiv::first-word {
  page-break-after: always;
}

I think a solution is to do this with 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/

Solution 3:

This works too (*same situation - you don't want a text break after a single word. My solution to that is to select the first two words, wrap them with a span with a class and don't let that text break):

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

Solution 4:

After you edited the question, I understand you actually don't want a text break after a single word. My solution to that is to select the first two words, wrap them with a span with a class and don't let that text break:

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