How to do line break of a string in PHP inside a div

Navigation
2

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

Iwouldlikeabreakinthelinetooccurinthesecases.boxescannotexpandtothesideaccordingtothelengthofthestring,onlydown

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>
    
asked by anonymous 19.04.2018 / 17:10

2 answers

7

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

div {
    word-wrap: break-word;
}

Explanation of w3schools

    
19.04.2018 / 17:22
3

There are two ways to do this. With word-wrap:break-word or word-break: break-all The first plays the word to a new line. The second word remains in the same line and only breaks down when it reaches the edge of the 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 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>
    
19.04.2018 / 17:37
How can I manipulate a PSD file to get the position of the layers? .is () jQuery - how does it work?