Center last line in justified textblock

Question

Is there a way to center the last line in a justified textblock?

I know of the CSS property text-align-last but it is only supported in Firefox and IE.

I’d like a method that works in all browsers. Even JS solutions are welcome.

Check That Question - http://stackoverflow.com/questions/4771304/justify-the-last-line-of-a-div — Anonymous, Sep 06 '14 at 20:58
I don’t want to justify the last line, I’d like to center it. — user1706680, Sep 06 '14 at 20:59

score 0 · Answer 1 · edited May 23 '17 at 10:33

UPDATE: Using Mary Melody's hint, the second-to-last line is now properly justified too: Online Demo

If your div only contains text, one solution is to wrap each word in a span, then detect the spans that are on the last line and move them to another div:

<html>

<head>

    <style>

        #theDiv {
            text-align: justify;
        }

        #theOtherDiv {
            background-color: #ffff00;
            text-align: center;
        }

    </style>

</head>

<body onload="doIt()" onresize="doIt()">

    <div id='theDiv'>

    </div>

    <div id='theOtherDiv'>

    </div>

    <script>

        var theText = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec elit id mauris viverra tristique. Donec tempor nisl at urna consequat, sit amet hendrerit felis suscipit. Etiam aliquet felis id placerat rhoncus. Duis rutrum, turpis at gravida faucibus, nulla libero vestibulum nisl, et lobortis enim dui quis eros. Vestibulum vitae suscipit mi, at malesuada arcu. Duis a volutpat nunc. Aliquam consequat diam hendrerit arcu tempus, faucibus posuere massa aliquam. Phasellus sit amet gravida massa. Nam ornare mollis enim, ac convallis neque facilisis a. Aliquam at pretium nisl.'.replace(/\s+/, ' ');

        function doIt() {

            var theWords = theText.split(' ');
            var divContent = theWords.map(
                function (c, i, a) { 
                    return '<span class="divWord">' + c + '</span>'; 
                });

            var theDiv = document.getElementById('theDiv');
            theDiv.innerHTML = divContent.join(' ');

            var divElementsHTML = theDiv.getElementsByClassName('divWord');
            var divElements = [];
            for (var i = 0; i < divElementsHTML.length; i ++) {
                divElements.push(divElementsHTML[i]);
            }

            var sortedDivElements = divElements.sort(
                function (e1, e2) { 
                    r1 = e1.getBoundingClientRect();
                    r2 = e2.getBoundingClientRect();

                    if (r1.top > r2.top) return -1;
                    if (r1.top < r2.top) return  1;

                    return r1.left - r2.left;
                });

            var lastLineTop = sortedDivElements[0].getBoundingClientRect().top;
            var sortedElementTops = sortedDivElements.map(
                function (c, i, a) { 
                    return c.getBoundingClientRect().top; 
                });

            var theOtherDiv = document.getElementById('theOtherDiv');
            theOtherDiv.innerHTML = '';

            var elementsToMove = [];

            for (var i = 0; i < sortedDivElements.length; i ++) {

                var e = sortedDivElements[i];
                var t = sortedElementTops[i];

                if (t == lastLineTop) {
                    elementsToMove.push(e);
                    theDiv.removeChild(e);
                } else {
                    break;
                }
            }

            theOtherDiv.innerHTML = elementsToMove.map(
                function (c, i, a) { 
                    return '<span class="divWord">' + c.innerHTML + '</span>'; 
                }).join(' ');
        }

    </script>

</body>

</html>

Online Demo

Of course, you'll probably have to tweak the div properties (e.g. padding, margin, border etc.) so that the two of them appear to be a single block of text.

Center last line in justified textblock

1 Answers1