How to stop the HTML/CSS from splitting a line of text in half between pages for print?

Question

Would anyone know why this is happening and how to stop it from happening?

I am currently styling a .css file for print only and for the life of me have no idea how to fix this line splitting.

Here's an image of the problem:

This is built with AngularJS and this content is being pulled in/by this partial:

<div class="row">
    <div class="columns">
        <a ng-href="#/education" class="backLink"><span>&#9664;</span> BACK </a>
    </div>

    <div class="small-12 medium-4 large-4 columns">
        <div sec-menu></div>
    </div>

    <div class="small-12 medium-8 large-8 columns">
        <div class="learning">
            <a href="javascript:window.print()" class="print-link">Print</a>
            <div ng-repeat="section in module.sections | filter:{'number': module.path.section}">
                <h3>PART {{ section.number | number:0 }}: <strong>{{ section.name | uppercase }}</strong></h3>
                <div ng-repeat="subSection in section.subSections | filter:{'number':module.path.subsection}">
                    <h4>{{ subSection.name | uppercase}}</h4>
                    <hr>
                    <div class="subSection">
                        <div ng-repeat="content in subSection.content" class="subSection_content">
                            <p ng-if="content.type =='p'" ng-bind-html="content.content" class="{{content.class}}"></p>
                            <img ng-if="content.type =='img'" ng-src="{{ content.url }}" alt="{{ content.content }}" class="{{content.class}}"/>

                            <div ng-if="content.type =='vid'" class="flex-video widescreen vimeo">
                                <div youtube-directive code="content.url"></div>
                            </div>

                            <h1 ng-if="content.type =='h1'" ng-bind-html="content.content"></h1>
                            <ol ng-if="content.type == 'ol_li'" class="{{content.class}}">
                                <li ng-repeat="li in content.content track by $index"  ng-bind-html="li.item" style=""></li>
                            </ol>
                            <ul ng-if="content.type == 'ul_li'" class="{{content.class}}">
                                <li ng-repeat="li in content.content track by $index"  ng-bind-html="li.item"></li>
                            </ul>


                            <ul ng-if="content.type == 'ul_img'" class="ul_img">
                                <li ng-repeat="li in content.content track by $index" class="{{content.class}}" ng-bind-html="li.item"></li><div class="clearBoth"></div>
                            </ul>
                            <dl ng-if="content.type == 'dd'">
                                <dd ng-repeat="dd in content.content track by $index" ng-bind-html="dd.item"></dd>
                            </dl>
                            <a ng-if="content.type == 'a'" ng-href="{{ content.url }}" class="{{content.class}}" ng-bind-html="content.content"></a>
                            <h3 ng-if="content.type == 'h3'" ng-href="{{ content.url }}"  class="{{content.class}}" ng-bind-html="content.content"></h3>
                            <h5 ng-if="content.type == 'h5'" ng-href="{{ content.content }}"  ng-bind-html="content.content"></h5>
                            <table ng-if="content.type == 'table'" class="{{content.class}}">
                                <caption>{{content.caption}}</caption>
                                <thead>
                                    <tr>
                                        <th ng-repeat="th in content.th">{{th.item}}</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr ng-repeat="tbody in content.tbody">
                                        <td ng-repeat="tr in tbody.td" ng-bind-html="tr.item"></td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>

                    <div class="QuizContainer"></div>

                        <div ng-repeat="question in module.questions | filter:{'number':module.path.subsection}" class="questionContainer" ng-class="{{question.class}}">
                            <div id="wrongAnswerImg">
                                <img class="wrongAnswerImg" ng-show="question.selectedAnswer.answerKey == 'false' && isValidated" style="width: 14px;" src=".../../img/icons/false.png" alt="an icon that shows a wrong answer" />
                            </div>
                            <div id="label">
                                <label ng-bind-html="question.title"></label>
                            </div>
                            <div ng-repeat="answer in question.answers">

                                <input type="radio"
                                       name="{{ question.title }}"
                                       ng-value="answer"
                                       ng-model="question.selectedAnswer">
                                <div class="question-box">{{ answer.answerLabel }}</div>

                                <div class="{{ quizModel }}" ng-click="seeModel(module, section, subsection, question, quizModel)"></div>

                                <div class="clearBoth"></div>
                            </div>
                        </div>

                        <button ng-if="subSection.sectionType == 'quiz'" ng-click="validate()" id="submitQuiz">Submit</button>

                        <div ng-show="showResultLow() && hideRetry()" class="resultMessage">
                            <p ng-show="showResultLow()"><span>{{ correctAnswers }}%</span> of your answers were correct. Please try again.</p>
                            <button id="retryQuiz" ng-show="hideRetry()" onclick="location.reload(true);">Retry Quiz</button>
                        </div>

                        <div ng-show="showResultHigh() && getCertificate" class="resultMessage">
                            <p ng-show="showResultHigh()"><span>{{ correctAnswers }}%</span> of your answers were correct! Would you like to print a certificate?</p>
                            <label>Full Name</label>
                            <input ng-model="module.submitter" type="text" name="name" id="name" required />
                            <button id="printCertificate" ng-show="getCertificate()" ng-click="pdfMaker()">Print Certificate</button>
                        </div>
                </div>
                    <button ng-click="goToPrevPage()" ng-hide="firstPrevBtn" class="previousBtn"><span>&#9664;</span> Prev</button>
                    <button ng-click="goToNextPage()" ng-hide="lastNextBtn" class="nextBtn">Next <span>&#9654;</span></button>
                </div>
            </div>
        </div>
    </div>
</div>

Also the content that is being printed in the .subSection div.

Answer 1

Put this inside your CSS for print

@media print {
    div {
        break-inside: avoid;
    }
}

The break-inside CSS property adjusts page breaks inside the current element.

Note: page-break-inside is deprecated, but might also be necessary in some cases.

Answer 2

I have to imagine what is doing this is a containing div being set to display: inline-block.

If you change this to display: block you should stop this behaviour.

Answer 3

I had the same issue -- I was able to solve it by setting a body selector in my print media query and setting margin to 0%.

@media print {

    body {

        margin: 0%;

    }

    /* ... @page, orphans & widows, the rest of your print css ... */
}

yep.. another hour gone.

Answer 4

It's difficult to work this out without seeing the HTML, but you could have a look into the overflow property:

overflow:visible;