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. ThreadLocal实现session中用户信息 的线程间共享(精)

    ThreadLocal并不难理解,我总结的最简单的理解就是: ThreadLocal像其它变量一样(局部.全局.静态)也是一种变量类型,只是他是线程变量,更直白的说他是一种变量作用域,即他的作用域是当 ...

  2. docker 笔记(基本概念、快速运行、自定义镜像)

    1.docker docker是一个打包应用的工具 非常强大,能把操作系统也打在包里,进行无差别部署和运行. 所以docker也被认为是建立在操作系统上的虚拟机.   2.基本概念 镜像(image) ...

  3. Android开发之SD卡上文件操作

    1. 得到存储设备的目录:/SDCARD(一般情况下) SDPATH=Environment.getExternalStorageDirectory()+"/"; 2. 判断SD卡 ...

  4. 总结Allegro元件封装(焊盘)制作方法[修整]

    总结Allegro元件封装(焊盘)制作方法 在Allegro系统中,建立一个零件(Symbol)之前,必须先建立零件的管脚(Pin).元件封装大体上分两种,表贴和直插.针对不同的封装,需要制作不同的P ...

  5. asp存储过程

    dim s_ip,MyComm s_ip=request.ServerVariables("REMOTE_ADDR") Set MyComm = Server.CreateObje ...

  6. NDK(5) Android JNI官方综合教程[JavaVM and JNIEnv,Threads ,jclass, jmethodID, and jfieldID,UTF-8 and UTF-16 Strings,Exceptions,Native Libraries等等]

    JNI Tips In this document JavaVM and JNIEnv Threads jclass, jmethodID, and jfieldID Local and Global ...

  7. MVC列表页通过CheckBox进行批量选择删除

    1.Html代码,将所有CheckBox包含于删除表单,并且所有列表项的CheckBox使用相同的Name,并且Value设置为数据项主键ID @using (Html.BeginForm(" ...

  8. 第五篇 Getting Started with ORACLE EBS(开始学习ORACLE EBS)

    第一篇介绍了ERP软件是供应链管理软件.告诉你这个软件改善或提升企业管理的切入点和着力点.有了着力点才能给力. 第二篇介绍了什么是咨询以及咨询工作共通的章法,告诉了你咨询的套路是什么,就像练习一套拳, ...

  9. fix org.openqa.selenium.NoSuchWindowException when find element on windows8.1 ie11.

    Steps:1.I was able to resolve the issue after adding the site URL under trusted sites of IE. The sam ...

  10. [转载]java的几种对象(PO,VO,DAO,BO,POJO)解释

    原文地址:java的几种对象(PO,VO,DAO,BO,POJO)解释作者:munandong 一.PO:persistant object 持久对象,可以看成是与数据库中的表相映射的java对象.最 ...