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

Question

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.imgur.com/EkcuR.jpg

Answer 1

How about this:

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

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

Answer 2

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

section div::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/

Answer 3

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/

Answer 4

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/