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.
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。