[Proyecto] Problema de anchura de un mensaje mandado por un textarea

Que tal, tengo un problema con mi proyecto del encriptador de mensajes, específicamente con css, tengo un textarea que recibe un texto y por medio de js hace el mensaje y lo coloca en una etiqueta "p" dentro de un "div", todo esto sale sin ningún problema, el problema ocurre cuando, trato de darle un ancho máximo a la etiqueta "p" donde se debe presentar el texto del textarea, pero el texto no respeta el ancho por lo que se va de corrido y no forma un salto de línea como se estaría esperando ¿algo que puedan recomendar? Este texto es del html

<main>

            <p class="requisito">&#9888 Solo letras minúsculas y sin acentos</p>

            <form>
                <textarea cols="50" rows="22" id="mensaje" class="input-mensaje" required placeholder="Pon aquí tu mensaje" ></textarea>

                <button id="encriptar" >Encriptar</button>
                <button id="desencriptar">Desencriptar</button>
            </form>

            <div class="parent">


                <img src="rectangulo.jpg" alt="rectangulo" class="recuadro">
                <img src="muñeco.jpg" alt="muñeco" class="muñeco" id="lupa">
                <p class="noencontrado" id="hola">No se ha encontrado ningún mensaje</p>
                <div class="recuadro-mensaje"><p id="mensaje-encriptado"></p></div>


            </div>
</main>

Este texto es del css

.recuadro-mensaje{
    position: absolute;
    width: 100%;
    padding: 0 10px;
}

#mensaje-encriptado{
    position: relative;
    left: 840px;
    top: 110px;

    font-family: 'Chivo Mono', monospace;
    font-size: 25px;
    color: #0A3871;
}