Fiddle illustrating the problem – 单击按钮几次,框将缩小,显示问题.
此问题似乎只发生在Internet Explorer中.
基本上,当包含white-space：pre-wrap的元素缓慢调整大小时,IE不会重新计算自动换行,导致文本被推送到元素之外.有些重新计算确实会发生,但不是全部.看起来,调整元素的大小越多,实际完成的重新计算就越多.
当容器的大小发生变化时,如何强制IE重新计算自动换行？
最佳答案
新的(荒谬的)HTML更改解决方案(但有效！)
由于奇怪的第一线故障,解决方案依赖于生成不重要的第一线然后适应它. This fiddle demonstrates对IE9来说似乎是一个现在的“无bug”解决方案(早期IE版本需要进行一些调整以解释我的伪元素/类使用).
HTML需要过多的包装,这样每个文本部分都是“双重包装”.该演示有三种不同的方法来获得块级别的包装,但都使用相同的修复.
基本HTML
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更改解决方案(第一行仍然失败)
使用预包装将div中的所有文本包装在div中,似乎使其表现为in this fiddle.
原文链接：https://www.f2er.com/css/427112.html