Edité la respuesta debido a que comentaste que no deseas **jQuery**, entonces prueba así:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->


    const btn = document.querySelector(".boton");
    const text = document.querySelector(".leer-mas");
    const wrapper = document.querySelector(".wrapper");

    btn.addEventListener("click", e => {
        text.classList.toggle("leer-mas_open");
        text.classList.contains("leer-mas_open") ? btn.innerHTML = "Leer Menos" : btn.innerHTML = "Leer Mas";
    });


<!-- language: lang-css -->

        .leer-mas {
            display: block;
            opacity: 0;
            max-height: 0;
            transition: all 0.5s;
        }

        .leer-mas_open {
            display: block;
            opacity: 1;
            max-height: 500px;
        }

        .wrapper {
            width: 40rem; /*PUEDES CAMBIAR PARA MODIFICAR EL ANCHO DEL DIV PADRE*/
            color: #000;
            margin: auto;
        }

        .contenedor {
            padding: 0.25rem;
        }

        .titulo {
            font-size: 1.7em;
            margin-bottom: 1rem;
            letter-spacing: 1px;
        }

        p {
            font-size: 0.8rem;
        }

        .boton {
            display: inline-block;
            color: white;
            background-color: grey;
            padding: 0.6rem 1.5rem;
            font-size: 1em;
            position: relative;
            z-index: 1;
            transition: all 0.5s;
            cursor: pointer;
        }

        .boton:hover {
            background-color: #fff;
            color: grey;
            box-shadow: 0 0 2 rem rgba(0, 0, 0, 0.1);
            transform: translateY(-3px);
        }

<!-- language: lang-html -->

    <div class="wrapper">
        <div class="contenedor">
            <h1 class="titulo"> Hola perros</h1>
            <p id="parrafo">
                Lorem ipsum dolor sit amet
                <span class="leer-mas">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat dicta rem fugiat numquam at maxime expedita voluptate fugit, culpa soluta, voluptatibus facere quo autem laudantium corporis molestiae? Voluptatem, temporibus pariatur. Lorem ipsum dolor
        sit amet consectetur adipisicing elit. Adipisci reprehenderit expedita explicabo libero officia impedit nisi odio. Fuga velit rerum sit nisi corrupti earum temporibus, officia, eveniet voluptas aperiam sint. Lorem ipsum dolor sit amet consectetur
        adipisicing elit. Nam delectus, facilis saepe placeat mollitia minima repudiandae dignissimos. Voluptatem doloremque deserunt suscipit, recusandae voluptas quia. At molestias laborum neque quos fugiat!
                </span>
            </p>
            <p class="boton">Read More</p>
        </div>
    </div>

<!-- end snippet -->