3

Possuo uma <div> que cria uma caixa aonde eu deveria imprimir uma string em PHP vinda de um banco de dados, porém quando a string é muito grande, ao invés de realizar a quebra de linha a string ficava "vazada" fora da caixa:

inserir a descrição da imagem aqui

Gostaria que nesses casos ocorressem uma quebra da linha. As caixas não podem expandir para o lado de acordo com o tamanho da string, somente para baixo

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>

2 Respostas 2

8

Use o word-wrap: break-word no css da div que deseja, assim:

div {
    word-wrap: break-word;
}

Explicação do w3schools

1
4

Existem duas formas de fazer isso. Com word-wrap:break-word ou com word-break: break-all O primeiro joga a palavra para uma nova linha. Já o segundo a palavra continua na mesma linha e só quebra para baixo quando atinge a borda da div.

Veja no exemplo como é o comportamento de cada um.

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

2
  • 2
    Boa resposta! Melhor explicada que a minha :s 19/04/2018 às 15:39
  • 2
    Só complementei ;)
    – hugocsl
    19/04/2018 às 15:40

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .