why is this tetx not overflowing on the x axis even though I have a fixed width and the <p tag is-CodePudding

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 >
        <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>

CodePudding user response：

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:

p{ 
    white-space: nowrap;
}