Question

Fiddle illustrating the problem – click the button a few times and the box will shrink, revealing the issue.

This issue appears to only happen in Internet Explorer.

Basically, when an element that contains white-space: pre-wrap is resized slowly, IE doesn’t recalculate word wrapping, resulting in text being pushed outside the element. Some recalculating does happen, but not all of it. The more the element is resized, it seems, the more recalculation is actually done.

Zooming the page fixes the issue, but is obviously not a practical solution.

How can I force IE to recalculate word wrapping when the container’s size changes?

Answer 1

New (ridiculous) HTML Change Solution (but works!)

Because of the odd first line failure, the solution depended upon generating a non-important first line and then accommodating it. This fiddle demonstrates what appears to be a now “bug free” solution for IE9 (some tweaking to account for my pseudo-element/class use would be needed for earlier IE versions).

The HTML requires an excessive amount of wrapping, such that each section of text is “double wrapped.” The demo has three different means of gaining the block level wrap, but all use the same fix.

Essential HTML

<div id="cnt">
  <p class="ieFixBlockWrap">
    <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tincidunt consectetur tortor, sed vestibulum lectus hendrerit at. Praesent fermentum augue molestie lectus pharetra eget cursus erat cursus.
    </span>
  </p>
  <span class="ieFixBlockWrap">
    <span>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent fringilla nisl posuere tortor rutrum lobortis.
    </span>
  </span>
  <div class="ieFixBlockWrap">
    <span>In risus libero, faucibus ac congue et, imperdiet ac purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi aliquam lobortis ullamcorper. Proin risus sapien, pulvinar in adipiscing non, rutrum hendrerit magna. Praesent interdum pharetra vehicula. Integer molestie mi neque.
    </span>
  </div>
</div>

CSS

#cnt {
    white-space: pre-wrap; 
    border:1px solid black;
    line-height: 1.2em; /* set explicitly, see below */
    /* prevent shifted :before from interfering with elements preceeding #cnt */
    overflow: hidden; 
}

.ieFixBlockWrap:before { /* this becomes the first line, but also an extra line gap */
    content:''; 
    display: inline-block;
    width: 100%;
}

.ieFixBlockWrap { 
    display: block; /* just to demo span as block level */
    margin: -1.2em 0; /* offset by line-height to remove gaps from :before*/
}

.ieFixBlockWrap:last-child {
    margin-bottom: 0; /* last one does not need the bottom margin adjusted */
}

Original HTML Change Solution (still failed on first line)

Wrapping all the text in a single span inside the div set with pre-wrap seemed to make it behave in this fiddle.