设置固定宽度且p标签为display:block，文本为何不横向溢出？

你的代码里，<p>元素的文本会自动换行，这是浏览器默认行为（white-space: normal），所以不会出现X轴方向的溢出。要复现X轴溢出，需要修改CSS，强制文本不换行：

修改后的CSS代码 #

.article {
  background-color: rgb(236, 161, 161);
  width: 20em;
}

.article p {
  display: block;
  /* 关键属性：强制文本不换行 */
  white-space: nowrap;
  /* 可选：如果需要显示横向滚动条 */
  /* overflow-x: auto; */
}

HTML代码（无需改动） #

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

关键说明 #

• white-space: nowrap：禁止文本自动换行，让文本沿X轴一直延伸，超出容器宽度就会出现X轴溢出。
• 如果需要让容器显示横向滚动条，加上overflow-x: auto；如果只是让文本直接溢出容器，保持默认的overflow-x: visible即可。

内容的提问来源于stack exchange，提问作者Tomas Gil Amoedo