pre标签内容溢出父容器

<pre>标签可定义预格式化的文本，被包围在pre元素中的文本通常会保留空格和换行符，而文本也会呈现为等宽字体。

通常在包含一段代码时，我们会用到<pre>标签，与<code>标签的区别是<pre>是块级的，而<code>是行内元素。

之所以使用<pre>标签，最大的目的莫过于希望保留内容中空格、换行、Tab的显示，特别是在显示代码片段时。

对于其他标签需要呈现为<pre>的样式，可以使用CSS：

white-space: pre;

由于在pre样式下内容不会换行，当内容宽度大于容器宽度时就会导致溢出，解决办法：

overflow-x: auto;

有人说可以修改<pre>的默认样式：

white-space: normal;

但真要这样干的话，又何必使用<pre>标签呢？

还有一个另外的情况是，在使用前一篇文章中提到的自适应布局时（box-sizing解决自适应布局容器宽度问题），由于#content的宽度是自适应的，在不明确指定#content宽度的情况下，<pre>会忽略#content的padding-right而溢出，解决办法是为#content指定一个宽度：

#content {
	width: 100%;
}

扫码添加UTHEME微信为好友

· 分享WordPress相关技术文章，主题上新与优惠动态早知道。
· 微信端最大WordPress社群，限时免费入群。