为什么这个 tetx 没有在 x 轴上溢出，即使我有一个固定的宽度和<p tag is set to display: block?< div></p><div id="text_translate"><p> 我需要文本在 X 轴上溢出只是为了重现我在更大项目中遇到的一些问题。 我留下一个简单的片段，所以你可以告诉我我在哪里做错了。 谢谢！ </p><p></p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"><div class="snippet-code"><pre class="snippet-code-css lang-css prettyprint-override"> .article { background-color: rgb(236, 161, 161); width: 20em; }.article p { display: block; }</pre><pre class="snippet-code-html lang-html prettyprint-override"> &lt;article class="article"&gt; &lt;p&gt;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.&lt;/p&gt; &lt;/article&gt;</pre></div></div><p></p></div>

Question

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>

Answer 1

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