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标签自动换行示例代码的更多相关文章

  1. Pre标签 自动换行

    <pre> 元素可定义预格式化的文本.被包围在 pre 元素中的文本通常会保留空格和换行符.而文本也会呈现为等宽字体. <pre> 标签的一个常见应用就是用来表示计算机的源代码 ...

  2. <pre></pre>标签自动换行

    原文地址:https://www.cnblogs.com/qq78292959/p/4193142.html   pre { white-space: pre-wrap; word-wrap: bre ...

  3. code标签和pre标签

    code标签: 1.code标签的定义: <code>标签, 用于表示计算机源代码或者其他机器可以阅读的文本内容.软件代码的编写者习惯了编写代码时的代码格式,那么这个<code> ...

  4. code标签和pre标签的定义

    前些日子一同事问了我一个关于code标签和pre标签的问题,嗯,是的,这两个标签凑到一块,便出现了问题.于是总结了一下.此文就重点谈一下code标签和pre标签喽,谈谈他们的定义,区别,应用以及这两个 ...

  5. 解决<pre>标签里的文本换行(兼容IE, FF和Opera等)

      我们都知道<pre> 标签可定义预格式化的文本,一个常见应用就是用来表示计算机的源代码.被包围在 pre 元素中的文本通常会保留空格和换行符,但不幸的是,当你在<pre>标 ...

  6. 使用<pre>标签为你的网页加入大段代码

    在上节中介绍加入一行代码的标签为<code>,但是在大多数情况下是需要加入大段代码的,如下图: 怎么办?不会是每一代码都加入一个<code>标签吧,没有这么复杂,这时候就可以使 ...

  7. 【HTML】让<pre>标签文本自动换行

    利用<pre></pre>这个标签可以将其包起来的文字排版.格式,原封不动的呈现出来. 也就是说你输入的东西被原封不动的输出,包括你输入的空格之类的,不用 和<BR> ...

  8. pre标签内文本自动换行

    pre标签内文本自动换行 给pre标签添加一个css样式 pre { white-space: pre-wrap; /* css-3 */ white-space: -moz-pre-wrap; /* ...

  9. pre标签 首行会自动换行解决方案

    利用pre标签可以 解决文本文档里面的空格及换行在页面上不显示的方案, 自行换行 加 white-space: pre-wrap; word-wrap: break-word; 英文字母换行 word ...

随机推荐

  1. Linux下SSH各配置项解释

    关于ssh 设置的相关总结(ssh最大连接数.ssh连接时长.安全性配置等) 以redhat6.3为例 ssh配置文件在: /etc/ssh/sshd_config 可以打开查看相应配置,默认情况下只 ...

  2. Android百度地图开发01之初体验

    做关于位置或者定位的app的时候免不了使用地图功能,本人最近由于项目的需求需要使用百度地图的一些功能,所以这几天研究了一下,现写一下blog记录一下,欢迎大家评论指正! 一.申请AK(API Key) ...

  3. JVM内存区域划分

    前言 Java程序的运行是通过Java虚拟机来实现的.通过类加载器将class字节码文件加载进JVM,然后根据预定的规则执行.Java虚拟机在执行Java程序的过程中会把它所管理的内存划分为若干个不同 ...

  4. .NET中使用OleDb读取Excel

    在.NET中可以用OleDb(Object linking and embeding DataBase)来访问Excel using System; using System.Data; using ...

  5. CF 2013-2014CTS01E04(Killer Challenge-将质因数存在 进行Bitmask)

    首先,把P进行质因数分解,每一个不用的质因数压成1位 f[i][j]表示1前i位用j“拥有”的质因数表示. 然后都懂得... #include<cstdio> #include<cs ...

  6. Spring事务的来龙去脉

    引言 Spring是一个IOC框架,在IOC框架的基础上,提供了DAO集成,AOP事务控制,JNDI等等一系列的高级功能,个人觉得,在Spring中最值得称道的不仅仅它是一个非入侵的IOC容器,而在于 ...

  7. Maven下使用Jetty进行Debug

    1.环境和条件 Maven-3.0.3Eclipse请阅读者事先具备一定maven知识 2 配置2.1 添加Jetty插件 在pom.xml中加入如下代码段 <plugin> <gr ...

  8. [lintcode the-smallest-difference]最小差(python)

    题目链接:http://www.lintcode.com/zh-cn/problem/the-smallest-difference/ 给定两个整数数组(第一个是数组 A,第二个是数组 B),在数组 ...

  9. Eclipse常用的插件安装

    嫌公司用的eclipse不爽,准备自己弄一个,diy的,没想到装插得烦死人. 诱惑人的“常用插件”: (1)    AmaterasUML        介绍:Eclipse的UML插件,支持UML活 ...

  10. 结构体 lock_t;

    typedef struct lock_struct lock_t; //利用typedef定义一个变量的类型 /** Lock struct */ struct lock_struct { trx_ ...