对齐文本块的中心最后一行

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

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

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

来源

2014-09-06 user1706680

包括Internet Explorer。 – 2014-09-06 20:56:21

更新了我的问题。 ;） – user1706680 2014-09-06 20:56:56

检查该问题 - http://stackoverflow.com/questions/4771304/justify-the-last-line-of-a-div – Anonymous 2014-09-06 20:58:13

UPDATE：使用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属性（例如填充，边距，边框等），以便它们中的两个似乎是单个文本块。

来源

2014-09-17 14:08:16 d0c

对齐文本块的中心最后一行

回答

相关问题