Предварительная упаковка пустого пространства не пересчитывается

Question

Скрипка, иллюстрирующая проблему - нажмите кнопку несколько раз, и окно уменьшится, раскрывая проблему.

Эта проблема возникает только в Internet Explorer.

В основном, когда элемент, который содержит white-space: pre-wrap изменяется медленно, IE не пересчитывает перенос слов, в результате чего текст выталкивается за пределы элемента. Некоторое пересчет происходит, но не все. Похоже, что чем больше размер элемента, тем больше он выполняется.

Увеличение страницы устраняет проблему, но, очевидно, не является практическим решением.

Как я могу заставить IE пересчитать перенос слов при изменении размера контейнера?

Answer 1

Новое (смешное) решение HTML Change (но работает!)

Из-за странного отказа первой строки решение зависело от генерации неважной первой строки и последующего ее размещения. Эта скрипка демонстрирует то, что теперь кажется "безошибочным" решением для 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 казалось, чтобы заставить его вести себя в этой скрипке.

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