CSS实现pre标签中内容换行方法

CSS实现pre标签中内容换行方法技术

maybe yes 发表于2015-01-25 18:35

原文链接 : http://blog.lmlphp.com/archives/70  来自 : LMLPHP后院

HTML 中的 PRE 标签默认是不会换行的,即使声明了 word-wrap 和 word-break 属性也没有效果;DIV 标签可以很方便的换行,不会把页面撑破。因为这个原因,很多网站在显示代码的时候使用 DIV 来作为容器。使用 DIV 标签装载代码有个弊端,就是冗余内容太多,换行,制表符,空格等都需要转换,自然源代码的体积也大了不少。若一定要使用 DIV 标签,也可以通过 white-space 来控制 DIV 中内容显示的样式,此举也是可以的。

本人认为,在源代码中使用 PRE 标签作为代码容器是首选,后期前端再用其他的 JavaScript 代码高亮插件美化渲染,那又另当别论。使用 CSS 将 PRE 中内容换行的样式如下,测试发现效果还不错。

<style>
pre{
    white-space: pre-wrap;       /* css-3 */
    white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
    white-space: -pre-wrap;      /* Opera 4-6 */
    white-space: -o-pre-wrap;    /* Opera 7 */
    word-wrap: break-word;       /* Internet Explorer 5.5+ */
    overflow: auto;
    word-break: break-all;
    word-wrap: break-word;
}
</style>

阅(72)评(0)查看评论

时间: 2024-10-11 21:22:39

CSS实现pre标签中内容换行方法的相关文章

html title属性内容换行方法

鼠标经过悬停于对象时提示内容(title属性内容)换行排版方法,html title 换行方法总结. html的title属性默认是显示一行的,这里介绍两种换行方法为大家分享使用. 鼠标经过html 链接title内容换行效果截图 一.直接title内容换行 直接填写title内容时候"回车键"换行,示例代码如下: <a href='http://www.divcss5.com/jiqiao/j510.shtml' target='_ablank' title='标 题:DIVC

js实现html表格&lt;td&gt;标签中带换行的文本显示出换行效果

遇见问题 如下内容中我写了几行,但是表格中并未按行显示,换行符反而变成了空格,于是想自己转换下 思考问题 1.可以看到表格的内容是后端传来的数据,于是想直接在后端转换下,把换行符替换成<br>标签 2.想到就做,如下,写好后一跑,发现,<br>只是显示成了文本,并不会被html识别成标签...啪啪啪打脸 3.继续想,准备在数据加载后,在js里面处理下,把文本内容中的换行符转为<br>标签:但是如果一个内容有多行文字,我就要把它拆分为多个小节,<br>好加,但

小程序之取标签中内容 例如view,text

// index.wxml页面 data-url为自定义 {{}}中内容可为后台请求到的数据 也可为固定内容例如:data-text="哈哈哈" data-url="https://www.cnblogs.com/liancat/" <text class='gotime linkUrl' bindtap='linkUrl1' data-url="{{linkUrl1}}">{{linkUrl1}}</text> // i

js获取标签中内容()

var month="#m_"+yyyymm; //获取value值$(month).attr("value") $(".turnover").html();$(".turnover").text(); document.getElementById(""); jquery 获取到div下面的<p>标签的内容 原文地址:https://www.cnblogs.com/yuanhongfei/p/

java读取html文件,截取&lt;body&gt;标签中内容

1 public String readfile(String filePath){ 2 File file = new File(filePath); 3 InputStream input = null; 4 try { 5 input = new FileInputStream(file); 6 } catch (FileNotFoundException e) { 7 e.printStackTrace(); 8 } 9 StringBuffer buffer = new StringB

HTML &lt;pre&gt; 标签(保留空格和换行符)

pre 元素可定义预格式化的文本.被包围在 pre 元素中的文本通常会保留空格和换行符.而文本也会呈现为等宽字体. 标签的一个常见应用就是用来表示计算机的源代码.  pre 元素可定义预格式化的文本.被包围在 pre 元素中的文本通常会保留空格和换行符.而文本也会呈现为等宽字体. 标签的一个常见应用就是用来表示计算机的源代码.对于技术博客经常会用到pre标签输出代码或是代码高亮,而默认情况下,pre 标签中的内容若超出范围不会自动换行. 下面介绍一个方法让 标签中的内容自动换行并符合 W3C 标

用WSDL4J解析types标签中的内容

WSDL4J是一种用来解析WSDL文本的常用工具. 但网络上用WSDL4J来解析wsdl文档complexType标签中内容的问题一大堆也没有有效的解决方法.今天在我"遍历"wsdl4j的api文档和网络资源后找到一种通用的解决方案,试了一下成功了.首先我参考了http://hi.baidu.com/wxmsona/blog/item/39b93444ee34842dcefca34c.html的解决方案.但这种解决方案不是我要找的通用的解决方案,因为这种方案在用DOM解析时用getEl

总结php删除html标签和标签内的内容的方法

经常扒别人网站文章的坑们:我是指那种批量式采集的压根不看内容的,少不了都会用到删除html标签的函数:这里介绍3种不同用途上的方法: $str='<div><p>这里是p标签</p><img src="" alt="这里是img标签"><a href="">这里是a标签</a><br></div>'; 1:删除全部或者保留指定html标签 php自带的

聊一聊HTML &lt;pre&gt;标签

我们经常会在要保持文本格式的时候使用pre标签,比如当我们要展示源代码的时候,只要放一个pre标签,然后把源代码直接复制,粘贴,然后在页面上就可以保持好格式.不会像放在其它标签里那样,把换行和空格都自动折叠了.这里看一下pre是如何工作的呢? pre标签 HTML里的pre元素,可定义预格式化的文本.在pre元素中的文本会保留空格和换行符.文本显现为等宽字体.下面我们看一个示例,这里我使用的是一段css代码,你也可以换成其它的.如下: body{ background:#fff; font: 1