<pre>标签的基本样式设置
断行
在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; /*设置字号*/
}
【2】http://www.w3school.com.cn/tags/tag_pre.asp
<pre>标签的基本样式设置的更多相关文章
- 【HTML】让<pre>标签文本自动换行
利用<pre></pre>这个标签可以将其包起来的文字排版.格式,原封不动的呈现出来. 也就是说你输入的东西被原封不动的输出,包括你输入的空格之类的,不用 和<BR> ...
- CSS样式设置语法全解,样式优先级、值和单位、字体、文本、块级元素,行内元素,替换元素、非替换元素、display、float、position、table、li、光标、边距边框、轮廓、颜色背景
全栈工程师开发手册 (作者:栾鹏) 一个demo学会css css选择器全解 css操作语法全解 CSS样式设置语法全解: 样式优先级 1. !important标记的样式 > 内联样式(sty ...
- 创建一个pre标签展开折叠的UI组件(原创)
这些天练习UI组件的编写,顺便模仿一个h5版本的pre标签收缩展开的效果组件: 兼容ie8.9,谷歌,火狐: 图片效果如下: demo.html代码: <!DOCTYPE html> &l ...
- css pre标签
浏览器:firfox49.0.2 在使用<pre>标签输出格式化文本的时候,遇到了一个小问题. 要在页面的底部输出两行文本,但是最后一行的文字总是距离屏幕的底部太大.下面图中的样子: 相关 ...
- code标签和pre标签
code标签: 1.code标签的定义: <code>标签, 用于表示计算机源代码或者其他机器可以阅读的文本内容.软件代码的编写者习惯了编写代码时的代码格式,那么这个<code> ...
- 返回Json数据浏览器带上<pre></pre>标签解决方法
问题: 当后台获取到前台传来的文件时(例如上传功能, 导入功能), 返回类型为application/json, 这个时候响应到前端的JSON格式的数据格式可能是: <pre style=&q ...
- QListWidget与QTableWidget的使用以及样式设置
QListWidget和QTableWidget的使用和属性,QTableWidget和QListWidget样式表的设置,滚动条的样式设置 一.QListWidget的使用 //一.QListWid ...
- HTML+CSS样式设置——CSS一学就会
HTML+CSS样式设置 CSS:(Cascading Style Sheets)层叠样式设置表. 网页的展示效果跟其排版有非常大的关系.排版则主要依靠CSS来设置.调节. 以下说CSS与HTML的联 ...
- SVG基本形状及样式设置
前面的话 图形分为位图和矢量图.位图是基于颜色的描述,是由像素点组成的图像:而矢量图是基于数学矢量的描述,是由几何图元组成的图像,与分辨率无关.可缩放矢量图形,即SVG,是W3C XML的分支语言之一 ...
随机推荐
- SecureCRT for ubuntu 菜单消失
两种解决方案. 1.先说网上查到的复杂的: 编辑CRT安装目录下的Global.ini 找到 D:"Show Menu Bar"=00000000 改成 D:"Show ...
- shop++改造之ResponseEntity的坑
后台shop++购物车请求的数据是一个Map结构的数据,业务需要要在类似的购物车中加一个套餐. 那么套餐里面就包含商品信息了,觉得不用他的Map了于是封装了两个类: 套餐信息显示类,商品信息显示类 请 ...
- jQuery视频格式的验证
$(document).on('change','#videofile',function() { var file = this.files[0]; if (!/video\/\w+/.test(f ...
- YouCompleteMe/third_party/ycmd/third_party/cregex" does not appear to contain CMakeLists.txt.
rm -rf YouCompleteMe/third_party/ycmd/third_party/cregex git submodule update --init --recursive at ...
- python -- leetcode 刷题之路
第一题 给定一个整数数组和一个目标值,找出数组中和为目标值的两个数. 你可以假设每个输入只对应一种答案,且同样的元素不能被重复利用. 示例: 给定 nums = [2, 7, 11, 15], tar ...
- MapReduce实现词频统计
问题描述:现在有n个文本文件,使用MapReduce的方法实现词频统计. 附上统计词频的关键代码,首先是一个通用的MapReduce模块: class MapReduce: __doc__ = ''' ...
- sweetalert插件的使用
sweetalert是一个漂亮的弹窗插件,使用它可以完成各种炫酷的弹窗效果 链接:sweetalert 实例 删除演示 urls.py from django.contrib import admin ...
- SpringBoot入门笔记(四)、通常Mybatis项目目录结构
1.工程启动类(AppConfig.java) 2.实体类(domain) 3.数据访问层(dao) 4.数据服务层(service) 5.前端控制器(controller) 6.工具类(util) ...
- 局域网内ping [局域网内ip地址]命令详解
一.工作过程 主机A向主机B发送一个ICMP请求报文[类型字段为8,代码字段为0],若收到ICMP回复报 文[类型字段为0,代码字段为0]则说明主机B处于活动状态:若超时未收到回复,则可能是 因为(1 ...
- Intelij IDEA 内置 sql gui
IDEA 内置 自带 SQL GUI 最大意义 会自动识别 domain 对象与数据表的关系,也可以通过 Database 的数据表直接生成 domain 对象等等. 第一步 打开数据库视图 Vie ...