让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 ...
随机推荐
- 在Ogre中加载自己的资源包
转自:http://www.cnblogs.com/minggoddess/archive/2011/02/19/1958472.html 由于数据保护的需要,一款游戏一般都会有自己独有的资源包,这样 ...
- iOS:核心动画的详解介绍:CAAnimation(抽象类)及其子类
核心动画的详解介绍:CAAnimation(抽象类) 1.核心动画基本概念 Core Animation是一组非常强大的动画处理API,使用它能做出非常炫丽的动画效果,而且往往是事半功倍! 使用它 ...
- SSIS ->> Script Task
利用Script Task,我们可以做一些本身SSIS没能满足我们的,或者实现起来效果不够理想的.比如说我们想做一件这样的事情,去检查某个文件是否为空.如果我们通过Row Count组件来实现,性能上 ...
- Matlab绘图高级部分
图形是呈现数据的一种直观方式,在用Matlab进行数据处理和计算后,我们一般都会以图形的形式将结果呈现出来.尤其在论文的撰写中,优雅的图形无疑会为文章加分.本篇文章非完全原创,我的工作就是把见到的Ma ...
- 32-语言入门-32-Triangular Sums
题目地址: http://acm.nyist.net/JudgeOnline/problem.php?pid=122 描述The nth Triangular number, T(n) = 1 ...
- 19.allegro过孔设置[原创]
一.根据线宽设置过孔 在规则管理器下 --- --- ---- --- --- 二.设置原点 法1: -- -- 法二: 然后鼠标点选 ---option栏目在哪? --- 三:过孔问题1 当一个过孔 ...
- mtk android lcm调试
参考MTK 文档LCM_Customer_document_MT6575.pdf The following shows the steps to add a new LCM driver: (1) ...
- 【HDOJ】3208 Integer’s Power
1. 题目描述定义如下函数$f(x)$:对于任意整数$y$,找到满足$x^k = y$同时$x$最小并的$k$值.所求为区间$[a, b]$的数代入$f$的累加和,即\[\sum_{x=a}^{b} ...
- linux下使用svn
安装:apt-get install subversion CHECKOUT 将文件checkout到本地目录 svn checkout path(path是服务器上的目录)例如:svn checko ...
- Java编程思想(11~17)
[注:此博客旨在从<Java编程思想>这本书的目录结构上来检验自己的Java基础知识,只为笔记之用] 第十一章 持有对象 11.1 泛型和类型安全的容器>eg: List<St ...