Necesito que el texto se desborde en el eje X solo para reproducir algún problema que tengo en un proyecto más grande. Dejo un fragmento simple, para que me digas dónde lo estoy haciendo mal. ¡Gracias!
.article {
background-color: rgb(236, 161, 161);
width: 20em;
}
.article p {
display: block;
}
<article class="article">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis deleniti iure quidem distinctio officia voluptates similique molestiae culpa? Perferendis, velit maiores nobis maxime aut facere eaque quis voluptas accusamus commodi.</p>
</article>Si desea que la etiqueta p se desborde en el eje x, simplemente debe indicarle que no se ajuste con la propiedad de espacio en blanco :
article{
width: 20em;
background-color: rgb(236, 161, 161);
}
article p{
display: block;
/* Do NOT break the text onto a new line when it reaches the container bounds. */
white-space: nowrap;
}
<article>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis deleniti iure quidem distinctio officia voluptates similique molestiae culpa? Perferendis, velit maiores nobis maxime aut facere eaque quis voluptas accusamus commodi.
</p>
</article>