Textou excedendo a div; | HTML e CSS | Alura - Cursos online de tecnologia

Textou excedendo a div;

Olá!

Como posso impedir que o texto dentro da div exceda o limite dela?

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="teste.css">
    </head>

    <body>

        <div class="container container1">
            <p>APENAS UMA DIV TESTE TESTE TESTE</p>
        </div>

        <div class="container container2">
            <p>APENAS OUTRA DIV</p>
        </div>

        <div class="container container3"> 
            <div class="container-interno"> <p>INTERNA</p></div>
        </div>


    </body>
</html>

html, b {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: sans-serif;
    border: 0;
}

.container {
    width: 200px;
    height: 200px;
    line-height: 200px;
    text-align: center;
    border: 1px solid black;
    text-transform: uppercase;
    cursor: pointer;
    color: black;

}

.container1 {
    background-color: blue;
}

.container2 {
    background-color: red;
}

.container3 {
    background-color: yellow;
}

.container-interno{
    border: 1px solid black;    
    width: 100px;
    height: 100px;
    line-height: 100px;
    background-color: green;
}

Nesse exemplo, o texto APENAS UMA DIV TESTE TESTE TESTE fica em cima da segunda div;

Como faço para que aconteça uma quebra de texto e fique dentro da mesma div? Tentei criar um seletor p{ word-break: break-all} e também display:block, mas não consegui resolver esse problema.

Pedro,

Percebi que você colocou muita limitação no container.

A largura e altura estão fixados em px e ainda há uma altura de linha também fixada em px.

Caso você precise realmente de uma altura de linha, podes retirar o height do container que o conteúdo irá se adaptar a altura do parágrafo que você quiser.

.container {
  width: 200px;
  line-height: 200px;
  text-align: center;
  border: 1px solid black;
  text-transform: uppercase;
  cursor: pointer;
  color: black;
}

Também podes deixar a altura do container fixada e retirar o line-height ou até mesmo usar uma medida relativa ao pai do p na dom, que seria o seu container.

.container {
  width: 200px;
  height: 200px;
  line-height: 200%;
  text-align: center;
  border: 1px solid black;
  text-transform: uppercase;
  cursor: pointer;
  color: black;
}

Vai testando para achar o que vai fazer mais sentido pra você.

Espero ter ajudado com algo. Abraço.