Question

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

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

我想要一种适用于所有浏览器的方法。即使是JS解决方案也是受欢

Answer 1

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

如果div只包含文本，一种解决方法是将每个单词包装在一个范围内，然后检测最后一行的跨度并将它们移动到另一个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属性（例如填充，边距，边框等），以便它们中的两个看起来像是一个单独的文本块。

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

1 个答案: