Reduce fonts or break text in Bootstrap 4 or HTML5

Question

The names of people in my HTML, when responsive, has a break, as shown in the following image:

The name Sanderson, the "N" goes down?

Follow the HTML snippet:

</section>
    <section class="engine"></section>
    <section class="testimonials5 cid-qTbDs8s2OT" id="testimonials5-j">
        <div class="container">
            <div class="media-container-row">
                <div class="title col-12 align-center">
                    <h3 class="mbr-section-subtitle mbr-light pb-3 mbr-fonts-style display-5">

                    </h3>
                </div>
            </div>
        </div>
        <div class="container">
            <div class="media-container-column">
                <div class="mbr-testimonial align-center col-12 col-md-10">
                    <div class="panel-item">
                        <div class="card-block">
                        <div class="testimonial-photo">
                            <?php 
                            echo '
                                <img src="cadastros/cadastros/_lib/file/imgimg_candidato/'.$resultado[0]['foto_padrao_tse'].'">                                
                            '; ?>
                        </div>                       
                        <div class="card-footer">
                            <?php echo '
                            <p class="mbr-text mbr-fonts-style mbr-white display-2"><strong>'.$resultado[0]['nome_politico'].'
                            </strong></p>

                            <div class="mbr-author-name mbr-bold mbr-fonts-style mbr-white display-5">
                            '.$resultado[0]['cargo_politico'].'</div> 
                            <small class="mbr-author-desc mbr-italic mbr-light mbr-fonts-style mbr-white display-7"><strong>
                            '.$resultado[0]['estado'].'<br>'.$resultado[0]['partido'].'</strong><br><br><br></small>'; ?>

                            <a class="btn btn-primary" href="https://www.site.com.br/restrito.php?id_candidato=<?php echo $_SESSION['id_candidato']; ?>">

                                  DOAR PARA SEU PRÉ-CANDIDATO</a>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

Answer 1

To keep the words whole even if it’s bigger than the div that’s inside you can use word-break: keep-all See in the example how it looks.

div {
    width: 60px;
    word-break: keep-all;
    border: 1px solid;
}

<div>
    <p>
        Paralelepípedo Paralelepípedo
    </p> 
</div>

There are two ways to control word breaking within a div for example. One with word-wrap:break-word another with word-break: break-all The first throws the word to a new line that I believe is what you want. The second word continues on the same line and only breaks down when it reaches the edge of the div.

See in the example how is the behavior of each.

.box{
    width:350px;
    height:100px;
    background-color: #4682B4;
    border-radius: 10px;
    float: left;
    margin: 10px;
    }

.impo2 { font-family: arial; color: white; }

.ult2{
    color: white; 
    font-family: Verdana; 
    font-size: large; 
}

.bw{
    word-wrap: break-word;
}
.ba{
    word-break: break-all;
}

<div class="box bw"><center><a class="ult2"><br>Servidores com maiores erros: </a><a class="impo2">Paralelepípedo Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ipsum, odit?</a></center></div>

    <div class="box ba"><center><a class="ult2"><br>Servidores com maiores erros: </a><a class="impo2">Paralelepípedo Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ipsum, odit?</a></center></div>

---

Tag <wbr>

There is still the option to use the tag <wbr> which serves to indicate to the browser where it should break a word. You can read more about this tag here https://developer.mozilla.org/en-US/docs/Web/HTML/Element/wbr

Practical example:

div {
    width: 60px;
}

<div>
    <p>
       Paralele<wbr>pípedo
    </p>
</div>