居中对齐文本块中的最后一行答案

【问题标题】：Center last line in justified textblock居中对齐文本块中的最后一行
【发布时间】：2014-10-31 12:19:50
【问题描述】：

有没有办法让最后一行居中对齐文本块？

我知道 CSS 属性 text-align-last，但它仅在 Firefox 和 IE 中受支持。

我想要一种适用于所有浏览器的方法。甚至 JS 解决方案也受到欢迎。

【问题讨论】：

包括 Internet Explorer。
更新了我的问题。 ;)
检查那个问题 - stackoverflow.com/questions/4771304/…
我不想证明最后一行是合理的，我想把它居中。

标签： javascript css text-align

【解决方案1】：

更新：使用Mary Melody's hint，倒数第二行现在也正确对齐：Online Demo

如果您的 div 仅包含文本，一种解决方案是将每个单词包装在一个 span 中，然后检测最后一行的 span 并将它们移动到另一个 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

当然，您可能需要调整 div 属性（例如内边距、边距、边框等），以使它们两者看起来是一个文本块。

【讨论】：