断行

在html中,换行符无法在一般标签内作为布局控制显示,包括xml实体 和 均表现为white-space,仅用于断字【1】

一般情形下,可使用<br>标签断行;但需要从原始xml文本读取内容时,处理实体转义要麻烦一些,此时可使用<pre>标签。

<pre>标签意为 preserve,保留内部文本的换行和空格【2】

样式

若在项目中使用了样式框架,则预定义样式可能不能满足<pre>标签的特殊需求。

此时可清除继承样式后,自行设置必要的样式,例如:

.pre_style{
all:initial; /*清除继承样式*/
display:block; /*设置布局流,避免换行导致的错误布局*/
white-space:pre-line; /*保留换行符,设置溢出换行*/
font-size:12px; /*设置字号*/
}

【1】https://stackoverflow.com/questions/3488198/why-is-br-an-html-element-rather-than-an-html-entity?noredirect=1

【2】http://www.w3school.com.cn/tags/tag_pre.asp

<pre>标签的基本样式设置的更多相关文章

  1. 【HTML】让<pre>标签文本自动换行

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

  2. CSS样式设置语法全解,样式优先级、值和单位、字体、文本、块级元素,行内元素,替换元素、非替换元素、display、float、position、table、li、光标、边距边框、轮廓、颜色背景

    全栈工程师开发手册 (作者:栾鹏) 一个demo学会css css选择器全解 css操作语法全解 CSS样式设置语法全解: 样式优先级 1. !important标记的样式 > 内联样式(sty ...

  3. 创建一个pre标签展开折叠的UI组件(原创)

    这些天练习UI组件的编写,顺便模仿一个h5版本的pre标签收缩展开的效果组件: 兼容ie8.9,谷歌,火狐: 图片效果如下: demo.html代码: <!DOCTYPE html> &l ...

  4. css pre标签

    浏览器:firfox49.0.2 在使用<pre>标签输出格式化文本的时候,遇到了一个小问题. 要在页面的底部输出两行文本,但是最后一行的文字总是距离屏幕的底部太大.下面图中的样子: 相关 ...

  5. code标签和pre标签

    code标签: 1.code标签的定义: <code>标签, 用于表示计算机源代码或者其他机器可以阅读的文本内容.软件代码的编写者习惯了编写代码时的代码格式,那么这个<code> ...

  6. 返回Json数据浏览器带上<pre></pre>标签解决方法

    问题:  当后台获取到前台传来的文件时(例如上传功能, 导入功能), 返回类型为application/json, 这个时候响应到前端的JSON格式的数据格式可能是: <pre style=&q ...

  7. QListWidget与QTableWidget的使用以及样式设置

    QListWidget和QTableWidget的使用和属性,QTableWidget和QListWidget样式表的设置,滚动条的样式设置 一.QListWidget的使用 //一.QListWid ...

  8. HTML+CSS样式设置——CSS一学就会

    HTML+CSS样式设置 CSS:(Cascading Style Sheets)层叠样式设置表. 网页的展示效果跟其排版有非常大的关系.排版则主要依靠CSS来设置.调节. 以下说CSS与HTML的联 ...

  9. SVG基本形状及样式设置

    前面的话 图形分为位图和矢量图.位图是基于颜色的描述,是由像素点组成的图像:而矢量图是基于数学矢量的描述,是由几何图元组成的图像,与分辨率无关.可缩放矢量图形,即SVG,是W3C XML的分支语言之一 ...

随机推荐

  1. python 面向对象(六)MRO C3算法 super

    ########################总结################ 面向对象回顾 类:对某一个事物的描述,对一些属性和方法的归类 class 类名: var=123#类变量 def ...

  2. Web前端框架与移动应用开发第八章

    Web前端框架与移动应用开发:制作58招聘专题页 1.html代码: <!DOCTYPE html><html><head> <meta charset=&q ...

  3. 理解self与this

    刚开始学习Python的类写法的时候觉得很是麻烦,为什么定义时需要而调用时又不需要,为什么不能内部简化从而减少我们敲击键盘的次数?你看完这篇文章后就会明白所有的疑问. self代表类的实例,而非类. ...

  4. log 的 debug()、 error()、 info()方法

    log4j定义了8个级别的log(除去OFF和ALL,可以说分为6个级别),优先级从高到低依次为:OFF.FATAL.ERROR.WARN.INFO.DEBUG.TRACE. ALL. 简单的说,就是 ...

  5. 解析ArcGis的字段计算器(二)——有玄机的要素Geometry属性,在属性表标记重复点线面

    这里所说的重复是指完成重复的,不是叠在一起的两个或多个要素,这种应该叫做“压盖”或“重叠”.重复往往是在合并多Shpfile文件时不小心重复导入造成的. 这里提供一种可能的解决办法,数据无价,请备份! ...

  6. Kettle 和数据建模的几个学习资料

    视频课程: 1. 初建军的   [慕课大巴分享]炼数成金——深入BI - Kettle 篇 基础书:1. Kettle 3.0 用户手册, 文件名为: ETL工具Kettle用户手册(上).pdf, ...

  7. 微信调试工具测试时有时候复制URL没有corpid解决

    可以直接去微信企业后台查询corpid,复制到粘贴到自己的url后面.

  8. 20155324 《Java程序设计》实验五 网络编程与安全

    20155324 <Java程序设计>实验五 网络编程与安全 实验内容 任务一 编写MyBC.java实现中缀表达式转后缀表达式的功能 编写MyDC.java实现从上面功能中获取的表达式中 ...

  9. l类与对象课后作业

    java 的初始化规律 执行类成员定义时指定的默认值或类的初始化块,到底执行哪一个要看哪一个“排在前面”. 执行类的构造函数. 类的初始化块不接收任何的参数,而且只要一创建类的对象,它们就会被执行.因 ...

  10. LOJ #2542「PKUWC2018」随机游走

    $ Min$-$Max$容斥真好用 $ PKUWC$滚粗后这题一直在$ todolist$里 今天才补掉..还要更加努力啊.. LOJ #2542 题意:给一棵不超过$ 18$个节点的树,$ 5000 ...