div/div 로의 자바 스크립트/Jquery 플로우 텍스트

Question

한 div에서 다음 div로 텍스트 스트림을 어떻게 흐르게합니까? 각 div는 고정 된 높이와 너비를 가지며 데이터가 첫 번째로 전달되어야합니다. 그런 다음 오버플로가 다른 것으로 채워지는 경우 두 번째 div 등이 동적으로 생성되어야합니다. 결국 div는 contenteditable이 될 것입니다. 이것은 간단한 WYSIWYG 스타일 편집기의 페이지 기술입니다.

도와주세요 ...

JS Fiddle (몸에서 사용 노트 줌)

(나는,/아래의 keyup에 리플 로우 페이지를 확인하고 필요에 따라 제거하고 중간에 추가 할 수 있어야합니다)

function loadgo(){ 
    run(); 
    var h = document.getElementById('page'+(document.getElementById("pagecount").value-1)).offsetHeight; 
    document.getElementById("loadgo").value = h+1; 
    if (h > 1135){ 
     var pagecount = document.getElementById("pagecount").value; 
     //$('body').append("<div class=page style='color:#F00' id='page"+pagecount+"' contenteditable>"+this.id+"</div>"); 
      var objTo = document.body; 
      var divtest = document.createElement("div"); 
      divtest.style.color = '#F00'; 
      divtest.id = "page"+pagecount; 
      divtest.className = 'page'; 
      divtest.contentEditable = "true"; 
      divtest.innerHTML = "new div"; 
      objTo.appendChild(divtest); 
     document.getElementById("page"+pagecount).focus(); 
     document.getElementById("pagecount").value++; 
     zoomin();zoomout(); 
     run(); 
    } 
} 
function run(){ 
    setTimeout(function() { 
     loadgo(); 
    }, 500); 
} 
loadgo(); 

Answer 1

당신이 찾고있는 것을 CSS 지역이라고합니다. 이렇게하면 텍스트가 사이트에 배치 된 다양한 컨테이너를 통해 흐르게됩니다.

Adobe's site에 대해 읽을 수 있으며 Apple은이를 구현하는 방법을 설명하는 좋은 WWDC video (8:40부터 시작)을 제공합니다. Editor's Draft도 확인하십시오.