How to line break a PHP string within a div

Question

I own a <div> that creates a box where I should print a PHP string coming from a database, but when the string is too large, instead of performing the line break the string was "leaked" out of the box:

I would like to see a break in the line in such cases. The boxes nay can expand to the side according to the size of the string, only down

CSS:

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

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

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

PHP:

<?php
$aaa = "hahahahaaoidhfajdhgajhgafdhgafjhgfjhadfkgafhjakjgkjdfhgajdfhgadkfjhgakfdjhgakdkajfhgakdjhgadfkjhgjafkjhdfgkjakjfdhgkadjfhgadjkhgkajhfgkjdhfgkjahfdgkajhfdg";
?>

HTML:

<div class="box"><center><a class="ult2"><br>Servidores com maiores erros: </a><a class="impo2"><?php echo $aaa; ?></a></center></div>

Answer 1

Use the word-wrap: break-word in the css of the div you want, like this:

div {
    word-wrap: break-word;
}

Explanation of w3schools

Answer 2

There are two ways to do this. With word-wrap:break-word or with word-break: break-all The first throws the word to a new line. The second word continues on the same line and only breaks down when it reaches the border 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 hahahahaaoidhfajdhgajhgafdhgafjhgfjhadfkgafhjakjgkjdfhgajdfhgadkfjhgakfdjhgakdkajfhgakdjhgadfkjhgjafkjhdfgkjakjfdhgkadjfhgadjkhgkajhfgkjdhfgkjahfdgkajhfdg</a></center></div>

    <div class="box ba"><center><a class="ult2"><br>Servidores com maiores erros: </a><a class="impo2">Paralelepípedo hahahahaaoidhfajdhgajhgafdhgafjhgfjhadfkgafhjakjgkjdfhgajdfhgadkfjhgakfdjhgakdkajfhgakdjhgadfkjhgjafkjhdfgkjakjfdhgkadjfhgadjkhgkajhfgkjdhfgkjahfdgkajhfdg</a></center></div>