空格预换行不重新计算

Question

按住Fiddle illustrating the problem键并单击该按钮几次，该框将缩小，从而显示问题。

此问题似乎仅在Internet Explorer中出现。

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

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

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

Answer 1

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

由于奇怪的第一条线路故障，解决方案依赖于生成一个不重要的第一条线路，然后容纳它。现在看来是一个“无bug”的IE9解决方案(对于早期的IE版本，需要对我的伪元素/类的使用进行一些调整)。

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。

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