為什么這個 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

我需要文本在 X 軸上溢出只是為了重現我在更大項目中遇到的一些問題。 我留下一個簡單的片段，所以你可以告訴我我在哪里做錯了。 謝謝！

 .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

如果您希望p標簽在 x 軸上溢出，您只需要使用white-space屬性告訴它不要換行：

p{ 
    white-space: nowrap;
}