I need the text to overflow on the X axis just to reproduce some issue that I'm having on a bigger project. I leave a simple snippet, so you can tell me where I'm doing it wrong. Thanks!
.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>If you want the p tag to overflow on the x-axis, you simply need to tell it not to wrap using the white-space property:
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>