白色空间预包装不重新计算

Question

说明问题的小提琴 - 单击按钮几次,框会缩小,显示问题.

此问题似乎只发生在Internet Explorer中.

基本上,当包含的元素white-space: pre-wrap缓慢调整大小时,IE不会重新计算自动换行,导致文本被推送到元素之外.有些重新计算确实会发生,但不是全部.看起来,调整元素的大小越多,实际完成的重新计算就越多.

缩放页面可以解决问题,但显然不是一个实用的解决方案.

当容器的大小发生变化时,如何强制IE重新计算自动换行？

Answer 1

新的（荒谬的）HTML 更改解决方案（但有效！）

由于奇怪的第一行故障，解决方案取决于生成不重要的第一行，然后容纳它。这个小提琴演示了现在看来是 IE9 的“无错误”解决方案（早期 IE 版本需要进行一些调整以适应我的伪元素/类的使用）。

HTML 需要过多的换行，因此文本的每个部分都是“双重换行”。该演示提供了三种不同的方法来获得块级包装，但都使用相同的修复方法。

基本 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

<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>

原始 HTML 更改解决方案（第一行仍然失败）

将所有文本包装在集合span内的单个文本中似乎使它在这个小提琴中表现良好。divpre-wrap