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和远程系统同步文件(未完成)

    实验环境: 本地主机:192.168.0.1 远程主机:192.168.0.101 1. 使用 scp,把/root/tardir1/achieve2.tar.gz复制到远程主机的root用户的hom ...

  2. python流程控制语句 ifelse - 4

    嵌套 #! /usr/bin/python a = int(input ("请输入一个整数:")) : : print ("无法显示") else : prin ...

  3. oracle11g卸载出错 无法删除文件,文件正在使用中

    在卸载oracle11g时 停止服务后,运行C:\myoracle\think\product\11.2.0\dbhome_2\deinstall 中的 deinstall.bat 可以在cmd中直接 ...

  4. 大规模视觉识别挑战赛ILSVRC2015各团队结果和方法 Large Scale Visual Recognition Challenge 2015

    Large Scale Visual Recognition Challenge 2015 (ILSVRC2015) Legend: Yellow background = winner in thi ...

  5. spry菜单栏(一)

    spry菜单栏使用教程 关于 Spry 框架 Spry 框架是一个 JavaScript 库,Web 设计人员使用它可以构建能够向站点访问者提供更丰富体验的 Web 页.有了 Spry,就可以使用 H ...

  6. AOJ-2249 Road Construction(最短路)

    http://acm.hust.edu.cn/vjudge/problem/viewProblem.action?id=45523 有一个国王想在首都与各个城市之间修建公路,但是他的预算太高,所以必须 ...

  7. poj 1182 食物链 (并查集)

    http://poj.org/problem?id=1182 关于并查集 很好的一道题,开始也看了一直没懂.这次是因为<挑战程序设计竞赛>书上有讲解看了几遍终于懂了.是一种很好的思路,跟网 ...

  8. [HIHO1176]欧拉路·一(欧拉图判定)

    题目链接:http://hihocoder.com/problemset/problem/1176 思路:先判是否连通,再判是否有0个或2个度为奇数的点. /* ━━━━━┒ギリギリ♂ eye! ┓┏ ...

  9. oracle创建表空间、创建用户、授权、夺权、删除用户、删除表空间

    表空间定义 表空间是为了统一ORACLE物理和逻辑上的结构而专门建立的,从物理上来说,一个表空间是由具体的一个或多个磁盘上数据文件构成的(至少1对1,可以1对多),从逻辑上来说一个表空间是由具体的一个 ...

  10. POJ 3259 Wormholes【Bellman_ford判断负环】

    题意:给出n个点,m条正权的边,w条负权的边,问是否存在负环 因为Bellman_ford最多松弛n-1次, 因为从起点1终点n最多经过n-2个点,即最多松弛n-1次,如果第n次松弛还能成功的话,则说 ...