Rendertron正在加载我的网页,但它在CSS文件(通过webpack捆绑的app.CSS(前面加了以下PRE标记和HTML标记:
<html><head><base href="https://redacted-for-security.com/css"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">@font-face{font-family:swiper-icons;font-style:normal;font </pre></body></html>
这显然破坏了渲染的页面布局。
有人知道它为什么这么做吗?
非常感谢
这是因为<head>
。
CSS属性page-break-after: avoid
在任何基于WebKit或Mozilla的浏览器中都不起作用,所以您可以在标题和可接受的文本量上使用page-break-inside: avoid
来防止这种页面中断:
CSS
<style type="text/css">
.nobreak {
page-break-inside: avoid;
}
</style>
HTML
<div class="nobreak">
<h3>Heading!</h3>
<p>Some things:</p>
</div>
<ul>
<li>Thing one</li>
<li>Thing B</li>
<li>Thing 4</li>
</ul>
相关来源:
- 如何避免标题后立即出现分页符