css white-space
以下是对上面几个属性的测试效果如下：
具体代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>white-space</title>
<style type="text/css">
div{
width: 1000px;
background-color: #ddd;
margin: 0 auto;
}
h4{
height: 40px;
line-height: 40px;
background-color: #def;
font-size: 16px;
padding-left: 10px;
}
.p-normal{
white-space: normal;
}
.p-pre{
white-space: pre;
}
.p-nowrap{
white-space: nowrap;
}
.p-pre-wrap{
white-space: pre-wrap;
}
.p-pre-line{
white-space: pre-line;
}
</style>
</head>
<body>
<div>
<h4>white-space: normal</h4>
<p class="p-normal">this is
a test !
</p>
</div>
<div>
<h4>white-space: pre</h4>
<p class="p-pre">this is 显示数据库操作命令，里面有很多的命令 db.foo.help(：显示集合操作命令，同样有很多的命令，foo指的是当前数据库下，一个叫foo的集合，并非真正意义上的命令
a test !
</p>
</div>
<div>
<h4>white-space: nowrap</h4>
<p class="p-nowrap">this is
a test !
</p></div>
<div>
<h4>white-space: pre-wrap</h4>
<p class="p-pre-wrap">this is 显示数据库操作命令，里面有很多的命令 db.foo.help(：显示集合操作命令，同样有很多的命令，foo指的是当前数据库下，一个叫foo的集合，并非真正意义上的命令
a test !
</p>
</div>
<div>
<h4>white-space: pre-line</h4>
<p class="p-pre-line">this is
a test !
</p>
</div>
</body>
</html>
css white-space的更多相关文章
- dom4j解析xml报错:Nested exception: org.xml.sax.SAXParseException: White space is required between the processing instruction target and data.
采用dom4j方式解析string类型的xml xml: String string="<?xmlversion=\"1.0\" encoding=\ ...
- White space is required before the encoding pseudo attribute in the XML declaration.
错误出现的位置: <?xml version="1.0"encoding="UTF-8"?> 正确方式: <?xml version=&quo ...
- CSS学习笔记——视觉格式化模型 visual formatting model
CSS 视觉格式化模型(visual formatting model)是用来处理文档并将它显示在视觉媒体上的机制.他有一套既定的规则(也就是W3C规范),规定了浏览器该怎么处理每一个盒子.以下内容翻 ...
- CSS魔法堂："那不是bug，是你不懂我!" by inline-block
前言 每当来个需要既要水平排版又要设置固定高宽时,我就会想起display:inline-block,还有为了支持IE5.5/6/7的hack*display:inline;*zoom:1;.然后发 ...
- css绘制特殊图形，meida查询，display inline-box间隙问题以及calc(）函数
本文同时发表于本人个人网站 www.yaoxiaowen.com 距离上一篇文章已经一个月了,相比于写代码,发现写文章的确是更需要坚持的事情.言归正传,梳理一下这一个月来,在写ife任务时,有必要记录 ...
- CSS魔法堂：你真的懂text-align吗？
前言 也许提及text-align你会想起水平居中,但除了这个你对它还有多少了解呢?本篇打算和大家一起来跟text-align来一次负距离的交往,你准备好了吗? text-align属性详解 The ...
- CSS 笔记一（Selectors/ Backgrounds/ Borders/ Margins/ Padding/ Height and Width）
Selectors/ Backgrounds/ Borders/ Margins/ Padding/ Height and Width CSS Introduction: CSS stands for ...
- 【转】Styling And Animating SVGs With CSS
原文转自:http://www.smashingmagazine.com/2014/11/03/styling-and-animating-svgs-with-css/?utm_source=CSS- ...
- 【轻松前端之旅】CSS选择器中的空格与尖括号有何区别？
CSS选择器中的空格与尖括号有何区别? 例子1: .a .b { margin: 0; } 空格隔开a和b,选择所有后代元素. 例子2: .a>.b { margin: 0; } 尖括号隔开a和 ...
- css绘制特殊图形，meida查询，display inline-box间隙问题以及calc()函数
本文同时发表于本人个人网站 www.yaoxiaowen.com 距离上一篇文章已经一个月了,相比于写代码,发现写文章的确是更需要坚持的事情.言归正传,梳理一下这一个月来,在写ife任务时,有必要记录 ...
随机推荐
- Bootstrap定制(一)less入门及编译
第一篇博,希望支持. 近期在开发一个项目,项目前端定位于bootstrap,遂花了少许时间研究了bootstrap,将其整理整理,与众人共享. bootstrap官方的定制,功能还算完善,但是基于we ...
- Form 表单常用正则验证 （收藏）
1.^\d+$ //匹配非负整数(正整数 + 0) 2.^[0-9]*[1-9][0-9]*$ //匹配正整数 3.^((-\d+)|(0+))$ //匹配非正整数(负整数 + 0) 4.^-[0-9 ...
- Python核心编程(第九章)--文件和输入输出
文件内建函数: open()函数提供了初始化输入/输出操作的通用接口 open()基本语法:file_object = open(filename,access_mode='r',buffering= ...
- Labeling Balls--poj3687
Labeling Balls Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 12273 Accepted: 3516 D ...
- js实现选项卡切换的三种方式
前两种主要实现一个选项卡的切换,第三种使用闭包看书,构造函数实现多个选项卡的切换: 1.第一种实现实现效果为: 实现代码为: <!doctype html> <!DOCTYPE ht ...
- nginx网站架构优化思路（原）
本人接触的优化主要分为三大类 黑体的为本模块下的重点 ---------------安全优化 安全在生产场景中是第一位的 1.1 站点目录权限的优化 (修改权限755 644 所属用户root,需要 ...
- 数据结构之------C++指针冒泡排序算法
C++通过指针实现一位数组的冒泡排序算法. 冒泡排序 冒泡排序(Bubble Sort),是一种计算机科学领域的较简单的排序算法. 代码: /* Name:冒泡排序算法 Copyright:Null ...
- javascript-ajax学习
/** * @todo 封装Ajax 传输类 * @param params:参数 * @example 用法: var mAjaxer = new Ajaxer(para ...
- 液晶顯示器 LCD (Liquid Crystal Disply )
常見的液晶顯示器按物理結構分為四種: (1)扭曲向列型(TN-Twisted Nematic): (2)超扭曲向列型(STN-Super TN): (3)雙層超扭曲向列型(DSTN-Dual Scan ...
- smartassembly 使用指南
原文 http://www.cnblogs.com/hsapphire/archive/2010/09/21/1832758.html smartassembly 提供了一种用于优化和混淆你的 .ne ...