Print issue - page breaks

Question

I load content into div like this:

<div className="grid-12-12 printContent" dangerouslySetInnerHTML={{ __html: props.content }}></div>

When printing the content breaks in the middle of words like this:

And this element in html looks like this:

<ul>
    <li>
        <div style="text-align:justify;"><span style="font-family:arial;">Grundsätzlich müssen Abschlüsse vor
                Laufzeitende unter Wettbewerb neu ausgeschrieben werden. Es sei denn, es liegen valide Gründe für eine
                Neuverhandlung oder Vertragsverlängerung vor.</span></div>
    </li>
    <li>
        <div style="text-align:justify;"><span style="font-family:arial;"><span style="font-family:arial;">Valide Gründe
                    können sein:</span></span></div>
    </li>
    <ul>
        <li>
            <div style="text-align:justify;"><span style="font-family:arial;"><span style="font-family:arial;"><span
                            style="font-family:arial;">Zu erwartende Preiserhöhungen bei
                            Ausschreibung</span></span></span></div>
        </li>
        <li><span style="font-family:arial;">Single Source aufgrund von technischen Vorgaben</span></li>
        <li><span style="font-family:arial;">Herstellergebundene Ersatzteile</span></li>
        <li><span style="font-family:arial;">Patentrelevante Umfänge</span></li>
        <li><span style="font-family:arial;">Produktpartner- oder Konzernvereinbarungen mit Standardfestlegung</span>
        </li>
        <li><span style="font-family:arial;">Sonderwerkzeuge</span></li>
        <li><span style="font-family:arial;">Monopolsituationen</span></li>
    </ul>
</ul>

I'm not able to modify inside content.

How to fix this? I tried applying various of css, added page-break-inside: avoid to printContent class and so on, nothing worked

It happens on few other elements too