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

Fiddle illustrating the problem-几次单击该按钮，该框将缩小，从而揭示了问题所在。

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

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

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

容器大小更改时，如何强制IE重新计算自动换行？

最佳答案

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

由于第一行奇数故障，解决方案取决于生成不重要的第一行然后容纳它。 This fiddle demonstrates似乎是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

#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更改解决方案(第一行仍然失败)

用span将所有文本包装在div集合内的单个pre-wrap中，似乎使其表现为in this fiddle。

关于css - 空白预包装不重新计算，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/11693815/