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

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

#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内的单个中似乎使它在这个小提琴中表现。divpre-wrap

Answer 2

看起来您可以通过删除元素然后将其添加回来来强制 IE 重新绘制容器（不幸的是，您不得不求助于这个，但是哦，好吧）。这是一个调整大小的函数，可以做到这一点，还有一个小提琴可以看到它的实际效果：

var resize = function(element, changeWidth, changeHeight){
    changeWidth = parseInt(changeWidth) || 0;
    changeHeight = parseInt(changeHeight) || 0;

    element.style.width = (parseInt(element.style.width) + changeWidth) + 'px';
    element.style.height = (parseInt(element.style.height) + changeHeight) + 'px';
    var parent = element.parentNode;
    parent.removeChild(element);
    parent.appendChild(element);
};