Reduce fonts or break text in Bootstrap 4 or HTML5

Question

Reduce fonts or break text in Bootstrap 4 or HTML5

Navigation

#1 by (1 votes)

1

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

ThenameSanderson,the"N" goes down, can not have this break or decrease the source?

Follow the snippet in HTML:

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

php html5 css3 bootstrap-4

asked by anonymous 25.06.2018 / 15:10

1 answer

Mount page dynamically with PHP Encapsulation of random amounts - is it possible?

score 1 · Accepted Answer

To keep the whole words even though it is larger than the div that are inside you can use word-break: keep-all See the example how it is.

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 wrapping within a div , for example. One with word-wrap:break-word another with word-break: break-all The first one plays the word for a new line that I believe to be what you want. The second word remains in the same line and only breaks down when it reaches the border of div .

See in the example how the behavior of each one is.

.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 <wbr> tag, which is to indicate to the browser where it should break a word. You can read more about this tag here link

Practical example:

div {
    width: 60px;
}

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