pre标签内容溢出父容器
文 / @UTHEME
<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插件:All in One WP Security & Firewall 怎么样(附:AIOWPS拦截垃圾评论设置教程) 2023-01-26 21:51:51
-
在 PHP 中如何通过一行代码就交换两个变量的值 2023-01-26 00:18:31
-
WordPress主题:Pin Premium (WordPress仿Pinterest样式瀑布流主题) 2023-01-25 23:36:43
-
免费WordPress主题:Maupassant(WordPress中文博客主题) 2023-01-25 23:31:29
-
WordPress响应式图片(Responsive Image)功能关闭:取消WordPress图片宽带和高度参数 2023-01-24 10:49:32
-
wordpress报错:修复MySQL 1064错误问题 错误原因和解决方法 2023-01-24 10:42:04
-
WP Rocket – 强大的WordPress缓存加速优化插件(附:WP Rocket插件设置过程与七折优惠码) 2023-01-24 00:41:44
-
WordPress 实现静态化搜索结果页面的方法 2023-01-24 00:41:44
-
get_permalink、get_the_permalink和the_permalink有啥区别? 2023-01-24 00:41:08
-
为什么选用WordPress搭建独立站? 2023-01-23 20:25:21