양쪽 정렬 된 텍스트 블록의 가운데 마지막 줄

정렬 된 텍스트 블록의 마지막 줄을 가운데로 정렬하는 방법이 있습니까?양쪽 정렬 된 텍스트 블록의 가운데 마지막 줄

나는 CSS 속성 text-align-last을 알고 있지만 Firefox와 IE에서만 지원됩니다.

나는 모든 브라우저에서 작동하는 방법을 원합니다. JS 솔루션도 환영합니다.

출처

2014-09-06 user1706680

Internet Explorer가 포함됩니다. –

내 질문이 업데이트되었습니다. ;) – user1706680

질문 확인 - http://stackoverflow.com/questions/4771304/justify-the-last-line-of-a-div – Anonymous

UPDATE : Mary Melody's hint를 사용은 마지막에서 두 번째 라인은 정상적으로 너무 정당화 : 당신의 사업부 텍스트 만 포함 된 경우 Online Demo는

, 하나 개의 솔루션 감지 한 후, 스팬의 각 단어를 포장하는 것입니다 마지막 줄에있는 다른 사업부로 이동 스팬 : 물론

<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

양쪽 정렬 된 텍스트 블록의 가운데 마지막 줄

답변

관련 문제