對齊文本塊的中心最後一行

有沒有辦法將最後一行居中對齊文本塊？對齊文本塊的中心最後一行

我知道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

對齊文本塊的中心最後一行

回答

相關問題