让pre标签自动换行示例代码
pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。
<pre> 标签的一个常见应用就是用来表示计算机的源代码。对于技术博客经常会用到pre标签输出代码或是代码高亮,而默认情况下,pre 标签中的内容若超出范围不会自动换行。
下面介绍一个方法让 <pre > 标签中的内容自动换行并符合 W3C 标准(多浏览器支持)pre{
white-space:pre-wrap; /* css3.0 */
white-space:-moz-pre-wrap; /* Firefox */
white-space:-pre-wrap; /* Opera 4-6 */
white-space:-o-pre-wrap; /* Opera 7 */
word-wrap:break-word; /* Internet Explorer 5.5+ */
}
示例:pre{white-space:pre-wrap; white-space:-moz-pre-wrap; white-space:-pre-wrap; white-space:-o-pre-wrap; word-wrap:break-word; /*我是一个很长很长的代码,看我换行了木有?*/}
让pre标签自动换行示例代码的更多相关文章
- Pre标签 自动换行
<pre> 元素可定义预格式化的文本.被包围在 pre 元素中的文本通常会保留空格和换行符.而文本也会呈现为等宽字体. <pre> 标签的一个常见应用就是用来表示计算机的源代码 ...
- <pre></pre>标签自动换行
原文地址:https://www.cnblogs.com/qq78292959/p/4193142.html pre { white-space: pre-wrap; word-wrap: bre ...
- code标签和pre标签
code标签: 1.code标签的定义: <code>标签, 用于表示计算机源代码或者其他机器可以阅读的文本内容.软件代码的编写者习惯了编写代码时的代码格式,那么这个<code> ...
- code标签和pre标签的定义
前些日子一同事问了我一个关于code标签和pre标签的问题,嗯,是的,这两个标签凑到一块,便出现了问题.于是总结了一下.此文就重点谈一下code标签和pre标签喽,谈谈他们的定义,区别,应用以及这两个 ...
- 解决<pre>标签里的文本换行(兼容IE, FF和Opera等)
我们都知道<pre> 标签可定义预格式化的文本,一个常见应用就是用来表示计算机的源代码.被包围在 pre 元素中的文本通常会保留空格和换行符,但不幸的是,当你在<pre>标 ...
- 使用<pre>标签为你的网页加入大段代码
在上节中介绍加入一行代码的标签为<code>,但是在大多数情况下是需要加入大段代码的,如下图: 怎么办?不会是每一代码都加入一个<code>标签吧,没有这么复杂,这时候就可以使 ...
- 【HTML】让<pre>标签文本自动换行
利用<pre></pre>这个标签可以将其包起来的文字排版.格式,原封不动的呈现出来. 也就是说你输入的东西被原封不动的输出,包括你输入的空格之类的,不用 和<BR> ...
- pre标签内文本自动换行
pre标签内文本自动换行 给pre标签添加一个css样式 pre { white-space: pre-wrap; /* css-3 */ white-space: -moz-pre-wrap; /* ...
- pre标签 首行会自动换行解决方案
利用pre标签可以 解决文本文档里面的空格及换行在页面上不显示的方案, 自行换行 加 white-space: pre-wrap; word-wrap: break-word; 英文字母换行 word ...
随机推荐
- Centos上的屏幕保护
关闭Centos上的屏幕保护:setterm -blank 0 设置Centos上的屏幕保护为5分钟:setterm -blank 5
- wamp集成环境开启虚拟主机多站点功能
方法/步骤 如果不是全白色,说明没有正常启动,先解决这个情况再进行下一步操作. 我们一键安装wamp到D盘,并可以正常启动,状态如下图所示: 在D:\wamp\bin\apache\Apach ...
- 推荐一个百度网盘搜索工具www.sososo.me
推荐一个百度网盘搜索工具 http://www.sososo.me
- 如何通过 jQuery text() 和 html()
text() - 设置或返回所选元素的文本内容 html() - 设置或返回所选元素的内容(包括 HTML 标记) val() - 设置或返回表单字段的值 $("#btn1").c ...
- YTU 2619: B 友元类-计算两点间距离
2619: B 友元类-计算两点间距离 时间限制: 1 Sec 内存限制: 128 MB 提交: 469 解决: 252 题目描述 类Distance定义为类Point的友元类来实现计算两点之间距 ...
- NDK(2)使用eclipse + ndk开发过程演示,含CPU架构编译
环境linux + eclipse + adt + ndk 1,在ide中配置ndk 下载ndk,在eclipse中配置 2,使用ndk编程 2.1 给项目添加ndk 支持 右键 项目名 --> ...
- 【POJ】3398 Perfect Service
1. 题目描述某树形网络由$n, n \in [1, 10^4]$台计算机组成.现从中选择一些计算机作为服务器,使得每当普通计算机恰好与一台服务器连接(并且不超过一台).求需要指定服务器的最少数量 2 ...
- 寄售Consignment和VMI有什么区别?
Consignment 寄存一般是指卖方把货物存放在买方所属仓库,消耗后结帐.库存水平控制和货物的物理管理都由买方负责.这是目前很多大卖场通行的做法.典型的VMI一般也是指卖方把货物存放在买方附近的仓 ...
- IBatis.Net 批量插入数据
利用了iterate标签来做的: 先看iterate标签几个属性的: prepend-加在open指定的符号之前的符号,添加在语句的前面(可选) property-类型为ArrayList的用于遍历的 ...
- linux下从源代码安装git
之所以有这样的需求,是因为部分预安装的git版本太低,很多功能没有并且安全性存在问题. 比如git submodule add xxx@host:yyy.git必须在父repo的root目录安装,而新 ...