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

但是,默认情况下,<pre /> 标签中的内容若超出范围不会自动换行,这样无论在显示或打印都会出现麻烦。

下面提供符合 W3C 标准并支持多浏览器的 CSS 样式代码:

pre{
white-space:pre-wrap;
white-space:-moz-pre-wrap;
white-space:-pre-wrap;
white-space:-o-pre-wrap;
word-wrap:break-word;
}

父标记最好加个DIV,并设置CSS属性:

word-wrap: break-word;white-space : normal

【HTML】让<pre>标签文本自动换行的更多相关文章

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

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

  2. 让pre标签自动换行示例代码

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

  3. Pre标签 自动换行

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

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

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

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

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

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

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

  7. 使pre的内容自动换行

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

  8. [HTML Q&A][转]使pre的内容自动换行

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

  9. 使pre的内容自动换行(转)

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

随机推荐

  1. 计算ptd

    因为公司的IC扫描sensor的频率常常和adapter中的noise频率重叠,导致IC接收到的数据出错.所以我们经常会用示波器看adapter的Noise,再用傅里叶变换找到相应应该回避的频段,包括 ...

  2. windows下安装ruby和 rails的痛苦经历

    准备安装ruby on rails,在网上搜了下,步骤都类似,但实际安装过程中却碰到很多问题.下面详细说下: 说明下,文章是按照我尝试的过程描述的.但最终是靠 运行 railsinstaller一键式 ...

  3. pthread_detach(pthread_self())

    pthread_detach(pthread_self()) 将状态改为unjoinable状态,确保资源的释放.其实简单的说就是在线程函数头加上 pthread_detach(pthread_sel ...

  4. svn: keywords

    在文件头里面加入下面的关键字: $Date$ $ID$ $Revision$ $Author$ 代码在svn提交时,先选中这几个关键字再提交. Date可能出现中文乱码: 在Control Panel ...

  5. Python中的循环与跳出

    --start-- for循环: for i in range(3): user_input = input("Your username:") passwd = int(inpu ...

  6. Navicat连接oracle,出现Only compatible with oci version 8.1 and&amp;nb

    与本地oracle连接的时候,一般没问题.sqlplus和oci都是本地oracle自带的.(设置: 工具->选项->oci) 分别为:   oci:D:\app\pcman\produc ...

  7. Jump的计划

    欢迎訪问我的github:https://github.com/xdnm 1.熟悉cocos2dx2.2.3开发框架 a.熟悉cocos2d api                           ...

  8. linux环境设置:使ftp不输密码

    # cd ~; # vi .netrc; Add beloew words, 可以追加多个账户: machine yourservername login yourname password your ...

  9. How to install vim on linux

    前几日了解到 vim 文本编辑器,据说很强大,使用起来效率很高,今天怀着很好奇的心理,学习了一下vim编辑器的下载安装方法,在此详细介绍一下安装vim编辑器的几种常用方法: 第一种方法就是在 Ubun ...

  10. .NET vs JAVA

    一个同事写一个方案,让我补充下.NET和 JAVA语言的优缺点,以下是我的回复: 老X你好! 我觉得这个问题,本质上不是java和.net两个开发语言方面的比较,单纯从这两个开发语言来讲,部分伯仲,在 ...