Tag <p> does not break line according to DIV

Question

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

I have the following above my doubt is why the P inside the div as in the image is not adjusting (breaking lines) as usual, Obs have this css: https://gist.github.com/nicollasfeitosa/2d4de32b36fdf3089ba786972c8130ad

Answer 1

You’re not breaking lines because your text aaaa... is seen as a single word (she has no spacing). Then via CSS you can indicate that the browser should insert break line in these cases, for this you can use the property word-break see the examples below:

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