pre标签内容溢出父容器
文 / @WordPress主题
<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%; }

相关文章
-
搭建一个WordPress网站需要多少成本 2023-11-06 00:09:51
-
Symlink介绍(附:如何使用Symlink进行WordPress开发) 2023-11-05 23:38:32
-
让WordPress实现数据库同步的插件:HyperDB 2023-10-24 23:40:49
-
allegro电商平台值得做吗(附:2023年Allegro注册流程指南) 2023-10-08 21:53:39
-
印度跨境电商平台有哪些(附:印度跨境电商做什么产品好) 2023-10-08 21:34:23
-
跨境电商必看的几大海外二手电商平台 2023-10-08 18:04:42
-
WordPress同城互联网产品解决方案:UBASE 2023-10-03 16:40:39
-
WordPress网站的安全插件:wordfence 2023-09-14 09:25:18
-
WordPress 6.3 支持在手动更新插件和主题失败后回滚旧版本 2023-08-28 16:58:45
-
WordPress 6.3版本(2023年8月)性能提升了哪些? 2023-08-28 16:56:02