Geek asks and answers

White space pre-packing is not recounted

Scenario illustrating the problem - press the button several times, and the window will be reduced, showing the problem.

This issue only occurs in Internet Explorer.

Basically, when an element containing white-space: pre-wrapis slowly changing, IE does not recount word wrap, as a result of which the text is extruded outside the element. Some recounts occur, but not all. The larger the element, the better, the more the recount.

Scaling the page fixes the problem, but obviously this is not a practical solution.

How can I get IE to recount word wrap when resizing a container?

+5
source share
2

() 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 div, pre-wrap, , .

+4

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

More articles:


All Articles