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%;
}
个赞
扫码关注背字根

一个热爱Web开发的大男孩