css - 空白预包装不重新计算

Question

Fiddle illustrating the problem - 点击按钮几次，框会缩小，显示问题。

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

基本上，当包含 white-space: pre-wrap 的元素缓慢调整大小时，IE 不会重新计算自动换行，导致文本被推到元素之外。确实会发生一些重新计算，但不是全部。元素的大小调整得越多，似乎实际上进行的重新计算就越多。

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

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

Answer 1

新的(荒谬的)HTML 更改解决方案(但有效!)

由于奇怪的第一行故障，解决方案取决于生成一个不重要的第一行，然后容纳它。 This fiddle demonstrates现在看来是 IE9 的“无错误”解决方案(对于早期的 IE 版本，需要进行一些调整以解决我的伪元素/类的使用问题)。

HTML 需要过多的换行，以至于文本的每个部分都是“双重换行”。该演示具有三种不同的方法来获得 block 级包装，但都使用相同的修复方法。

基本 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 */
}

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

用 pre-wrap 将所有文本包装在 div 内的单个 span 中似乎使其表现得很好 in this fiddle .