JavaScript에서 x 등호로 문자열을 분할하는 방법 (텍스트가 양쪽 정렬 됨)

Question

임의의 문자열을 동등한 부분으로 분할하려고 필사적으로 노력하고 있으므로 각 항목을 개별적으로 테마로 지정할 수 있습니다. 내 목표는 내 텍스트에 왜곡 된 효과를 내고 있지만 텍스트를 정당화하고 분할 된 단어없이 유지하는 것입니다.

이 예제에서 알 수 있듯이 결과는 매우 실망 스럽습니다.

http://vps10937.ovh.net/hyphenator/WorkingExample1.html (플라톤 2)

여기 내 코드입니다 :

jQuery(document).ready(function() { 
    jQuery('p.platon2').each(function(index) { 
    lengthTotal = jQuery(this).text().length 
    var string = jQuery(this).text(); 
    string = jQuery.trim(string); 
    var length = 56; 
    var trimmedString = string.substring(0, length); 
    jQuery(this).text(''); 
    lengthTotalPrev = 0; 
    j=0; 
    z=0 
     for (i=length; i<lengthTotal; i=i+length){ 
     j++; 
     z=z+5; 
     rowString = string.substring(lengthTotalPrev, i); 
     jQuery(this).append('<span id="row'+j+'" class="rows" style="position:relative;left:-'+z+'px;">'+rowString+'</span>'); 
     lengthTotalPrev = i; 
     } 
    }); 
}); 

지금 내가 제대로 내 텍스트를 분할과 동일한 라인을 얻을 수있는 플러그인 hyphenator.js를 사용하는 것을 시도하고있다. 결과는 예쁜

Hyphenator.config({ 
    displaytogglebox : true, 
    minwordlength : 4 
}); 
Hyphenator.run(); 

하지만, 이것으로 내 텍스트 트위스트 있도록 각 라인에 CSS를 적용 할 수 없습니다 :

http://vps10937.ovh.net/hyphenator/WorkingExample1.html (플라톤 1)

이 플러그인을 호출하려면, 그것은 매우 쉽게 . 나는 hyphenator.js

---

편집 .. 위에서 아래로 파일을하지만 라인의 텍스트를 분할 아무것도 발견하지 않았습니다 (여기를 클릭하여 소스 코드를 참조)

---

탐험

a plugin I found on github을 수정했습니다. 이것으로 이제는 원하는 결과에 가까운 것을 할 수있게되었습니다. 그러나 여전히 몇 가지 문제가 있습니다.

http://vps10937.ovh.net/hyphenator/WorkingExample1.html (플라톤 3)

1) 스크립트는 매우 느립니다. 결과를 캐시 할 수 있습니까? 선이없는 정확히 동일하므로

2) 텍스트

3) 만 파이어 폭스에서 작동 ..., 더 이상 정당화 될 수 없습니다!

Here is the code http://vps10937.ovh.net/hyphenator/jquery.truncatelines.js

$.fn.truncateLines = function(options) { 
options = $.extend($.fn.truncateLines.defaults, options); 

return this.each(function(index, container) { 

    container = $(container); 
    var containerLineHeight = Math.ceil(parseFloat(container.css('line-height'))); 

    var maxHeightFixed = containerLineHeight; 
    //var maxHeight = options.lines * containerLineHeight; 

    var truncated = false; 
    var truncatedText = $.trim(container.text()); 
    //var overflowRatio = container.height()/maxHeight; 

    var oldTruncatedText; // verify that the text has been truncated, otherwise you'll get an endless loop 
    var oldContainerHeight; 
    textArray= new Array(); 

    jQuery(document.body).append('<p class="paragraphProvisory1" style="display: none;"></p>'); 
    jQuery(document.body).append('<p class="paragraphProvisory2" style="display: none;"></p>'); 

    while (container.height() > 0 && oldTruncatedText != truncatedText) { 
     if(oldContainerHeight!=container.height()){ 


      truncatedTextTest = truncatedText; 
      jQuery('.paragraphProvisory1').text(truncatedTextTest); 

      //11nd line 
      if(container.height()==containerLineHeight*11){ 
       createLine(10); 
      } 
      //10nd line 
      if(container.height()==containerLineHeight*10){ 
       createLine(9); 
      } 
      //9nd line 
      if(container.height()==containerLineHeight*9){ 
       createLine(8); 
      } 
      //8nd line 
      if(container.height()==containerLineHeight*8){ 
       createLine(7); 
      } 
      //7nd line 
      if(container.height()==containerLineHeight*7){ 
       createLine(6); 
      } 
      //6nd line 
      if(container.height()==containerLineHeight*6){ 
       createLine(5); 
      } 
      //5nd line 
      if(container.height()==containerLineHeight*5){ 
       createLine(4); 
      } 
      //4nd line 
      if(container.height()==containerLineHeight*4){ 
       createLine(3); 
      } 
      //3nd line 
      if(container.height()==containerLineHeight*3){ 
       createLine(2); 
      } 
      //2nd line 
      if(container.height()==containerLineHeight*2){ 
       createLine(1); 
      } 
      //1st line  
      if(container.height()==containerLineHeight*1){ 
       textArray[0]= "<div class='line1'>"+truncatedTextTest+"</div>";  
      } 

     } 

     oldTruncatedText = truncatedText; 
     oldContainerHeight = container.height() 
     truncatedText = truncatedText.replace(/\s.[^\s]*\s?$/, ''); // remove last word 
     container.text(truncatedText); 

    } 

    jQuery('.platon3').text(''); 
    jQuery.each(textArray, function(i) { 
    jQuery('.platon3').append(textArray[i]); 
}); 

}); 
}; 
function createLine(rowNumber){ 
    var oldTruncatedTextTest; 
    var row = 0; 
    positionLeft = rowNumber * 10; 
    rowNumber++; 
    jQuery('.paragraphProvisory2').text(truncatedTextTest); 
     containerTest = $('.paragraphProvisory2'); 
     while (containerTest.height() > 20 && oldTruncatedTextTest != truncatedTextTest) { 
      row++; 
      oldTruncatedTextTest = truncatedTextTest; 
      truncatedTextTest = truncatedTextTest.substr(truncatedTextTest.indexOf(" ") + 1); 
      jQuery('.paragraphProvisory2').text(truncatedTextTest); 
      if(containerTest.height()==20){ 
       textArray[rowNumber]= "<div class='line"+rowNumber+"' style='position: relative; left: -"+positionLeft+"px;'>"+truncatedTextTest+"</div>"; 
      } 
     } 
}; 

Answer 1

이 원하는 정확히 아니지만, 당신은 CSS3 사용에 맞게 전체 텍스트 컨테이너를 왜곡 수 있습니다 : 당신이 원하는 제대로 이해하면

.platon { 
    transform: skew(160deg,0deg); 
    -ms-transform: skew(160deg,0deg); 
    -moz-transform: skew(160deg,0deg); 
    -webkit-transform: skew(160deg,0deg); 
    -o-transform: skew(160deg,0deg); 
    width: 367px; 
} 

Answer 2

을 자신의 CSS를 각 에 하이픈으로 연결된 줄에 적용하십시오. 따라서 classname을 다음과 같이 정의하십시오.

      Hyphenator.config({                
classname : 'yourclass',              

})