Question

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

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

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

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

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

Answer 1

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

由于奇怪的第一线故障，解决方案依赖于生成非重要的第一线然后适应它。 This fiddle demonstrates IE9现在似乎是一个现在的“无bug”解决方案（早期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内的所有文字包裹在{{1}}内似乎使其显得in this fiddle。

Answer 2

看起来你可以通过删除元素然后再添加它来强制IE重绘容器（不幸的是你必须诉诸于此，但是哦）。这是一个调整大小的函数，它将与a fiddle to see it in action：

一起完成

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);
};

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

2 个答案:

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

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