css pre标签

浏览器:firfox49.0.2

在使用<pre>标签输出格式化文本的时候,遇到了一个小问题. 要在页面的底部输出两行文本,但是最后一行的文字总是距离屏幕的底部太大.下面图中的样子:

相关的代码:

1  <footer>
2         <div class="navbar-fixed-bottom">
3             <pre class="text-center" style="margin-bottom: 0px;">
4                   住着抠门的老翁
5              email : [email protected]
6             </pre>
7         </div>
8     </footer>

刚开始以为是div和pre标签的样式导致的,所以通过下面的调试器查看了一下:

并没有发现pre.text-center的样式有其对应的样式规则.后来通过盒模型查看了一下,才发现原来是pre标签内文本的空格行导致的.将代码改成如下:

1   <footer>
2         <div class="navbar-fixed-bottom">
3             <pre class="text-center" style="margin-bottom: 0px;">
4                   住着抠门的老翁
5              email : [email protected]</pre>
6         </div>
7     </footer>
8     </body>

浏览器查看网页:

解决问题.

时间： 2024-10-14 14:56:33

css pre标签的相关文章

CSS实现pre标签中内容换行方法

CSS实现pre标签中内容换行方法技术 maybe yes 发表于2015-01-25 18:35 原文链接 : http://blog.lmlphp.com/archives/70  来自 : LMLPHP后院 HTML 中的 PRE 标签默认是不会换行的,即使声明了 word-wrap 和 word-break 属性也没有效果:DIV 标签可以很方便的换行,不会把页面撑破.因为这个原因,很多网站在显示代码的时候使用 DIV 来作为容器.使用 DIV 标签装载代码有个弊端,就是冗余内容太多,换

解决&lt;pre&gt;标签里的文本换行(兼容IE, FF和Opera等)

我们都知道<pre> 标签可定义预格式化的文本,一个常见应用就是用来表示计算机的源代码.被包围在 pre 元素中的文本通常会保留空格和换行符,但不幸的是,当你在<pre>标签里面写代码的时候,如果你没有手动换行,它也会给你保留,而不会动换行. 这时候,你可以使用overflow:auto; (当代码超出容器边界的时候,显示滚动框), 但这个方法也并不适用于所有主流浏览器,一些浏览器会直接截断超出的内容 . 由于本站中使用源码的地方也不是很多,之前也不是很在意这个问题,前不久有位热心

聊一聊HTML &lt;pre&gt;标签

我们经常会在要保持文本格式的时候使用pre标签,比如当我们要展示源代码的时候,只要放一个pre标签,然后把源代码直接复制,粘贴,然后在页面上就可以保持好格式.不会像放在其它标签里那样,把换行和空格都自动折叠了.这里看一下pre是如何工作的呢? pre标签 HTML里的pre元素,可定义预格式化的文本.在pre元素中的文本会保留空格和换行符.文本显现为等宽字体.下面我们看一个示例,这里我使用的是一段css代码,你也可以换成其它的.如下: body{ background:#fff; font: 1

创建一个pre标签展开折叠的UI组件（原创）

这些天练习UI组件的编写,顺便模仿一个h5版本的pre标签收缩展开的效果组件: 兼容ie8.9,谷歌,火狐: 图片效果如下: demo.html代码: <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge

&lt;pre&gt;标签让&lt;textarea&gt;标签的内容原样输出

当通过<textarea>插数据进数据的库,取出来后都变成一行变成,用这个<pre>标签能原样输入插入时的格式. 当时要对<pre>加一些CSS样式才行啦. 以下为引用的内容: <style> pre { white-space: pre-wrap;       /* css-3 */ white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */ white-space: -pre-wrap;      /*

1)前端的html和css基础标签

1) 前端:html 这里使用谷歌浏览器 开发工具使用pycharm 1.HTML的概述 html全称HyperText Mackeup Language,翻译为超文本标记语言,它不是一种编程语言,是一种描述性的标记语言,用于描述超文本内容的显示方式.比如字体.颜色.大小等. 注:html中,除了语义,其他什么都没有. 2.HTML的网络术语 · 网页 :由各种标记组成的一个页面就叫网页. · 主页(首页) : 一个网站的起始页面或者导航页面. · 标记: <p>称为开始标记 ,</p&

&lt;pre&gt;标签

pre标签可以使文本中的回车空格显示: 但是不会自动换行,需要自己定义: pre { white-space: pre-wrap; /* css-3 */ white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ word-wrap: break-word; /* Internet Exp

HTML学习笔记——锚链接、pre标签、实体

1>锚链接 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="

code标签和pre标签

前言 前些日子一同事问了我一个关于code标签和pre标签的问题,嗯,是的,这两个标签凑到一块,便出现了问题.于是总结了一下.此文就重点谈一下code标签和pre标签喽,谈谈他们的定义,区别,应用以及这两个家伙凑到一块应该怎么使用.以及当这两个标签嵌套使用时,不同的浏览器对这个嵌套的解析是什么. 一.嵌套顺序 code标签和pre标签是可以嵌套使用的,需要指出的是,火狐之前某一版本在解析code标签和pre标签的嵌套时,顺序不当会出现浏览器将DOM结构解析错误的问题呢.这仅仅是火狐自己的问题啦,