Javascript 居中对齐文本块中的最后一行_Javascript_Css_Text Align

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

javascript css

Javascript 居中对齐文本块中的最后一行,javascript,css,text-align,Javascript,Css,Text Align,有没有办法将对齐的文本块中的最后一行居中我知道CSS属性text align last，但它仅在Firefox和IE中受支持我想要一个适用于所有浏览器的方法。甚至JS解决方案也受到欢迎更新：使用，倒数第二行现在也正确对齐：如果您的div仅包含文本，一种解决方案是将每个单词包装在一个span中，然后检测最后一行的span并将其移动到另一个div： <html> <head> <style> #theDiv {

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

我知道CSS属性

text align last

，但它仅在Firefox和IE中受支持

我想要一个适用于所有浏览器的方法。

甚至JS解决方案也受到欢迎

更新：使用，倒数第二行现在也正确对齐：

如果您的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>


#提夫{
文本对齐：对齐；
}
#theOtherDiv{
背景色：#ffff00；
文本对齐：居中；
}
var theText=‘Lorem ipsum door sit amet，concetetur adipsicing elit。Nunc nec精英id mauris viverra tristique。在urna consequat上暂时停止，坐在amet hendrerit felis suscipit上。这是一只猫科动物。酒后驾车，孕妇浮士德的turpis，自由前庭的nulla libero nisl，以及在性爱中的lobortis enim dui quis eros。前庭生命支持，位于malesuada arcu。杜克是一个修女。阿利夸姆·康斯奎特·亨德雷特·阿尔库·坦普斯，福西布斯·波苏尔·马萨·阿利夸姆。Phasellus坐在妈妈身边。Nam ornare mollis enim，ac convallis neque facilisis a。前尼索处的等分。替换（/\s+/，”）；
函数doIt（）{
var theWords=文本分割（“”）；
var divContent=theWords.map(
函数（c，i，a）{
返回“+c+”；
});
var theDiv=document.getElementById（'theDiv'）；
theDiv.innerHTML=divContent.join（“”）；
var divElementsHTML=theDiv.getElementsByClassName（'divWord'）；
var-divElements=[]；
for（变量i=0；ir2.top）返回-1；
如果（r1.top



当然，您可能需要调整div属性（例如，填充、边距、边框等），使它们看起来像一个文本块。
包括internet explorer。更新了我的问题。；）检查这个问题-我不想证明最后一行是正确的，我想把它放在中间。