Como evitar que o texto escape do elemento HTML

Se eu faço o código da seguinte maneira o texto do "h2" acaba saindo pelas bordas, há alguma maneira de evitar isso?

    <ul class="produtos">
                <li>
                    <h2>Cabelo xxxxxxxxxxxxxxxx xxxxxxxxxxxxxxx xxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</h2>
                    <img src="./cabelo.jpg" alt="">
                    <p class="produto-descricao">Na tesoura ou na máquina, como o cliente preferir</p>
                    <p class="produto-preco">R$ 25,00</p>
                </li>
                <li>
                    <h2>Barba</h2>
                    <img src="./barba.jpg" alt="">
                    <p class="produto-descricao">Corte e desenho profissional de barba</p>
                    <p class="produto-preco">R$ 18,00</p>
                </li>
                <li>
                    <h2>Cabelo + Barba</h2>
                    <img src="./cabelo+barba.jpg" alt="">
                    <p class="produto-descricao">Pacote completo de cabelo e barba</p>
                    <p class="produto-preco">R$ 35,00</p>
                </li>
            </ul>