-1

inserir a descrição da imagem aqui

<div class="row tweet">
<div class="col">

    <div class="tweetContainer">
        <p id="tweet">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
    </div>

    <br />
    <form>
        <div class="col d-flex justify-content-end">
            <button type="submit" class="btn btn-danger"><small>Remover</small></button>
        </div>
    </form>
</div>

Tenho o seguinte acima minha duvida é porque o P dentro da div conforme na imagem não esta se ajustando (quebrando linhas) conforme o normal, obs tenho esse css: https://gist.github.com/nicollasfeitosa/2d4de32b36fdf3089ba786972c8130ad

0

1 Resposta 1

3

Não esta quebrando linha porque seu texto aaaa... é visto como uma unica palavra (ela não tem espaçamento). Então via CSS você pode indicar que o navegador deve inserir quebra de linha nesses casos, para isso você pode usar a propriedade word-break veja os exemplos abaixo:

.tweetContainer {
  width: 200px;
  border: 1px solid red;
}

.break-all {
  word-break: break-all;
}

.break-word {
  word-break: break-word;
}
<div class="tweetContainer">
  <p id="tweet">
    <b>word-break: normal;</b> 11111111111111111 222222222222222222222222222222222222222222 333333333333333333333333333333333333333333</p>
</div>

<div class="tweetContainer">
  <p id="tweet" class='break-all'>
    <b>word-break: break-all;</b> 11111111111111111 222222222222222222222222222222222222222222 333333333333333333333333333333333333333333</p>
</div>

<div class="tweetContainer">
  <p id="tweet" class='break-word'>
    <b>word-break: break-word;</b> 11111111111111111 222222222222222222222222222222222222222222 333333333333333333333333333333333333333333</p>
</div>

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