Question

PURPOSE
Having an editable div in which the text flows in different "simulated" pages, so to obtain an effect like Word. At the moment, I'm interested to have this working in Chrome (no crossbrowser compatibility).

WHAT I'VE DONE
I've created an editable div (pagina) already filled with some text. Inside this div there are 2 divs: block1 and block2.
Block1 is a floating right div that simulates the page height.
Block2 is a floating left div that simulate the space between pages.
The effect I've obtained is a long text "broken" into pages. In my code I've used different background colors to have a better view of the various divs.

THE PROBLEM
When I move the cursor at the beginning of a new "page" and I press [return] more times, the new lines are moved at the right side of the above block2 div (the pages sepatator). If I type something, single letters appears in the right side (see screenshot below).

Problem screenshot

In this Fiddle (http://jsfiddle.net/n4d2jtd9/4/) you can see my experiments result.

.pagina {
  width: 200px;
  background-color: #AAA;
}

div.block1 {
  float: right;
  width: 100px;
  height: 100px;
  background-color: #CCC;
}

div.block2 {
  float: left;
  width: 200px;
  height: 100px;
  background-color: #FFF;
}

<body>
  <div class="pagina">
    <div class="block1"></div>
    <div class="block2"></div>

    <div class="block1"></div>
    <div class="block2"></div>

    <div contenteditable="true" style="width:90px;background-color:#DDD;word-break:break-all;">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec libero mi, tempus in tincidunt vitae, aliquet nec nibh. Integer egestas leo vel orci

    </div>
  </div>
</body>

THE QUESTION
Is there a way to prevent that text effect?

CONSIDERATIONS
When you press [enter] inside an editable div, Chrome adds a div tag per paragraph (and a br tag when you press [enter]+[shift]).
The created "empty" div is always <div><br></div>. Having a zero width, the floating div moves this tag to right. I've noticed that if I put a space char inside the div, it works properly. Maybe jQuery can help.

Answer 1

新代码：基于浏览器：
工作演示：http://jsfiddle.net/n4d2jtd9/9/

<强> HTML

    <body>

        <div  class="pagina">



        <div class="block1"></div>
        <div class="block2"></div>

        <div class="block1"></div>
        <div class="block2"></div>

        <div id="editable" contenteditable="true" style="width:90px;background-color:#DDD;word-break:break-all;
        ">


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec libero mi, tempus in tincidunt vitae, aliquet nec nibh. Integer egestas leo vel orci

  </div>

</div>

    </body>

的 CSS

#editable{white-space:normal} } /* Chrome 29+ */ @media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution:.001dpcm) { #editable{white-space:pre-line;} } /* Chrome 22-28 */ @media screen and(-webkit-min-device-pixel-ratio:0) { .selector {-chrome-:only(; #editable{white-space:pre-line;} );} }

HTML/CSS Text flows outside div trough floating divs

1 个答案:

的 CSS