利用<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. pyfits过滤数据更新文件。

    import pyfits as pf import numpy as np import matplotlib.pyplot as plt hdulist = pf.open("LE_ev ...

  2. POJ 3528 求三维凸包表面积

    也是用模板直接套的题目诶 //#pragma comment(linker, "/STACK:16777216") //for c++ Compiler #include < ...

  3. 基于visual Studio2013解决C语言竞赛题之0520相邻元素

          题目

  4. leetcode第一刷_Binary Tree Inorder Traversal

    递归实现当然太简单,也用不着为了ac走这样的捷径吧..非递归实现还挺有意思的. 树的非递归遍历一定要借助栈,相当于把原来编译器做的事情显式的写出来.对于中序遍历,先要訪问最左下的节点,一定是进入循环后 ...

  5. iOS设置textfield为密码框

    self.passWordTextField.secureTextEntry = YES;

  6. 演练2-2:Guestbook示例应用程序

    为使Guestbook应用程序有用,我们需要为用户提供一些提交数据的方式,将这些数据存储起来,以便稍后进行查看.为了达到这一目标,我们打算对应用程序添加一个数据库,将其作为该留言簿的后台存储库. 1. ...

  7. poj3070 Fibonacci 矩阵快速幂

    学了线代之后 终于明白了矩阵的乘法.. 于是 第一道矩阵快速幂.. 实在是太水了... 这差不多是个模板了 #include <cstdlib> #include <cstring& ...

  8. 【iOS发展-53】实例探究:scrollView使用方法和解决方案无法滚动核心

    案例效果: (1)基本的就是练习scrollView的使用方法.界面里面的其它元素基本都是UIView和UIButton堆砌起来的. (2)主要用代码实现.当然,能够先用storyboard拖个scr ...

  9. []: secureCRT连接ubuntu问题- The remote system refused the connection

    secureCRT连接ubuntu问题- The remote system refused the connection http://jxyang.iteye.com/blog/1484915 解 ...

  10. JDK 安装环境配置(ubuntu)

    在Ubuntu 上安装jdk,先去官网下载相对应的tar包 网址:(这是jdk1.8) http://www.oracle.com/technetwork/java/javase/downloads/ ...