Search code examples
javascriptjquerycssline-breaks

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?

https://i.sstatic.net/EkcuR.jpg


Solution

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