<pre> 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。

<pre> 标签的一个常见应用就是用来表示计算机的源代码。

而我们经常碰到的一个问题是如果一个代码上碰到有图片或者网页地址就会使代码很长,结果会造成页面撑开或者代码超出边界。非常难受,如果用overflow:hidden那么会将原来的代码隐藏掉,用overflow:auto则会出现滚动条,代码也不方便阅读。

点击查看:http://www.css88.com/demo/pre/index-1.html

今天折腾了一个晚上终于搞定<pre>的内容自动换行的问题:

1.先尝试使用:word-wrap: break-word;将内容自动换行,IE,OP,Chrome,Safari都可以,FF就悲剧了。

点击查看:http://www.css88.com/demo/pre/index-2.html

2.查看了pre的浏览器默认样式:

xmp, pre, plaintext {
display: block;
font-family: -moz-fixed;
white-space: pre;
margin: 1em 0;
}
都有这个white-space: pre,看看white-space的值:
描述
normal 默认。空白会被浏览器忽略。
pre 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
nowrap 文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止。
pre-wrap 保留空白符序列,但是正常地进行换行。
pre-line 合并空白符序列,但是保留换行符。
inherit 规定应该从父元素继承 white-space 属性的值。

有个pre-wrap,保留空白符序列,但是正常地进行换行。

这样就OK了搞定,我们只要加上样式:

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

就能使<pre>的内容自动换行了。

点击查看:http://www.css88.com/demo/pre/

使pre的内容自动换行的更多相关文章

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

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

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

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

  3. 使pre的内容自动换行(转)小知识

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

  4. pre的内容自动转行

    使pre的内容自动换行(转) <pre> 元素可定义预格式化的文本.被包围在 pre 元素中的文本通常会保留空格和换行符.而文本也会呈现为等宽字体. <pre> 标签的一个常见 ...

  5. idea 未实现接口红线提示,重复代码波浪线提示,自动换行,控制台输出内容自动换行

    01,Could not autowire. No beans of 'UserMapper' type found 01.1,问题描述,通过反射动态实现的接口在调用时会出现以上提示,常见的如 ORM ...

  6. css控制英文内容自动换行問題

    css控制英文内容自动换行 HTML: <!-- 因为要显示的内容是用户通过CMS添加进入数据库,再抓取出来前台显示的,所以你根本无法 控制每一行内容的长度. 所以我在显示内容的div设置了一个 ...

  7. DatagridView内容自动换行和换行符换行

    内容自动换行: 在 DataGridView 新增 Row 时,設定 DataGridView 的 DefaultCellStyle 屬性WrapMode=true: 换行符换行: 在 DataGri ...

  8. DIV的内容自动换行

    word-break:break-all和word-wrap:break-word都是能使其容器如DIV的内容自动换行. 它们的区别就在于: 1,word-break:break-all 例如div宽 ...

  9. Jlabel实现内容自动换行

    Jlabel实现内容自动换行 摘自:https://blog.csdn.net/zhhtao89/article/details/50179695   2015年12月04日 21:09:27 阅读数 ...

随机推荐

  1. OpenJudge计算概论-发票统计

    /*====================================================================== 发票统计 总时间限制: 1000ms 内存限制: 65 ...

  2. python input() 与 raw_input()

    使用input和raw_input都可以读取控制台的输入,但是input和raw_input在处理数字时是有区别的 当输入为纯数字时: input返回的是数值类型,如int,floatraw_inpo ...

  3. R提高篇(五): 描述性统计分析

    数据作为信息的载体,要分析数据中包含的主要信息,即要分析数据的主要特征(即数据的数字特征), 对于数据的数字特征, 包含数据的集中位置.分散程度和数据分布,常用统计项目如下: 集中趋势统计量:  均值 ...

  4. MSCRM Plugin Debug

    MS CRM 2011的自定义和开发(11)——插件(plugin)开发(四) 上面几篇文章介绍了Microsoft Dynamics CRM 2011中如何进行插件开发,本文将介绍插件的调试. 调试 ...

  5. 清理java环境

    system32中存在3个java*.exe文件,分别是: c:/windows/system32/java.exe c:/windows/system32/javaw.exe c:/windows/ ...

  6. Nova分析(1)——整体架构

    Conceptual Diagram Logical diagram Nova is the most complicated and distributed component of OpenSta ...

  7. 获取网页URL地址及参数等的两种方法(js和C#)

    转:获取网页URL地址及参数等的两种方法(js和C#) 一 js 先看一个示例 用javascript获取url网址信息 <script type="text/javascript&q ...

  8. (转)Edge实现NodeJS与.NET互操作(包括UI界面示例)

    本文转载自:http://blog.csdn.net/kimmking/article/details/42708049 1.  Edge是什么 Edge是一种在进程内实现NodeJS与.NET互操作 ...

  9. IntelliJ IDEA优化总结

    1.修改JVM参数 (IntelliJ IDEA 10.0.1包含以上版本不需要设置)修改idea.exe.vmoptions配置文件调整以下内容:-Xms256m-Xmx384m-XX:MaxPer ...

  10. php 自带函数

    memory_get_usage()://查看当前内存使用情况单位 bytes str_repeat("liuhui", 2);//字符串重复指定次数,liuhui重复2次