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. 在CentOS 7中安装与配置Tomcat-8方法

    安装前提 在CentOS 7中安装与配置JDK8 安装tomcat  apache-tomcat-8.0.14.tar.gz文件上传到/usr/local中执行以下操作: [root@localhos ...

  2. Java:Object类

    objcet类中涉及的多态的扩展性,由于Object是所有类的根类,所以它可以接收任意类型的数据,包括基本数据类型.因为这一特点,它可以对多态性进行扩展. 1.创建一个Demo类来判断类类型 clas ...

  3. spring+mybati java config配置引起的bean相互引用日志报警告问题

    摘要: Error creating bean with name 'XXX': Requested bean is currently in creation: Is there an unreso ...

  4. adb 安卓opencv manager报错:adb server is out of date.killing

    原因:ref:http://jingyan.baidu.com/article/d621e8da0dee022865913fce.html      最后发现360mobil.exe占用 5037 通 ...

  5. 《Java编程那点事儿》读书笔记(四)——String和StringBuffer

    String 1.toString:显示对象内容时系统自动调用的方法. public class TOSTRING { public String toString(){ return "t ...

  6. Android 动画 setVisibility 后出错解决方法

    ===先说明下背景. 写的是个ListView 设置 adapter,并在列表末尾显示加载更多,点击 加载更多 时, 变成一个 圆环形的加载动画和 正在加载. 说明下,这个 加载动画是自己做得,一个圆 ...

  7. GraphicsMagick / ImageMagick缺少lib报错no decode delegate for this image format

    下载相应的lib,编译安装就行了 cd ~ #下载包 wget http://www.imagemagick.org/download/delegates/zlib-1.2.7.tar.gz wget ...

  8. Android eclipse中程序调试

    一:断点调试 用eclipse开发android程序的时,跟VS一样是可以断点单步调试的.步骤如下.1 设置断点:在编码窗体的左边框上用鼠标双击,或者右键点击菜单,选择 Toggle Breakpoi ...

  9. MyBatis的foreach语句详解 list array map

    foreach的主要用在构建in条件中,它可以在SQL语句中进行迭代一个集合.foreach元素的属性主要有 item,index,collection,open,separator,close.it ...

  10. iOS 7 如何关闭已打开的应用(App)

    刚升级了 iOS 7,感觉不太会用了. 在多任务状态下,看着一个个已被打开的应用,不知道如何关闭了. 问了下朋友才知道,在多任务状态下,将对应的应用 向上划 就行. 听说,和 Android 一样的 ...