Rendertron modifying CSS

72 Views Asked by Joel At 01 August 2022 at 12:17

Rendertron is loading my webpage, but it is prefacing the CSS file (bundled app.css via webpack) with the following PRE tag and HTML tags:

<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>

This obviously breaks the page layout for the render.

Does anyone know why it is doing this?

Many thanks

Original Q&A

There are 1 best solutions below

DialFrost On 15 August 2022 at 08:35

This is because of the <head>.

The CSS property page-break-after: avoid doesn't work in any WebKit or Mozilla based browsers, so you can alternatively use the page-break-inside: avoid over the heading and an acceptable amount of the text to prevent this page break:

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>

Relvant sources:

How do I avoid a page break immediately after a heading

Rendertron modifying CSS

There are 1 best solutions below

CSS

HTML

Related Questions in PHANTOMJS

Related Questions in SERVER-SIDE-RENDERING

Related Questions in RENDERTRON

Trending Questions

Popular # Hahtags

Popular Questions