以下是对上面几个属性的测试效果如下：

　　

　　具体代码如下：

<!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的更多相关文章

  1. 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=\ ...

  2. White space is required before the encoding pseudo attribute in the XML declaration.

    错误出现的位置: <?xml version="1.0"encoding="UTF-8"?> 正确方式: <?xml version=&quo ...

  3. CSS学习笔记——视觉格式化模型 visual formatting model

    CSS 视觉格式化模型(visual formatting model)是用来处理文档并将它显示在视觉媒体上的机制.他有一套既定的规则(也就是W3C规范),规定了浏览器该怎么处理每一个盒子.以下内容翻 ...

  4. CSS魔法堂："那不是bug，是你不懂我!" by inline-block

    前言  每当来个需要既要水平排版又要设置固定高宽时,我就会想起display:inline-block,还有为了支持IE5.5/6/7的hack*display:inline;*zoom:1;.然后发 ...

  5. css绘制特殊图形，meida查询，display inline-box间隙问题以及calc(）函数

    本文同时发表于本人个人网站 www.yaoxiaowen.com 距离上一篇文章已经一个月了,相比于写代码,发现写文章的确是更需要坚持的事情.言归正传,梳理一下这一个月来,在写ife任务时,有必要记录 ...

  6. CSS魔法堂：你真的懂text-align吗？

    前言 也许提及text-align你会想起水平居中,但除了这个你对它还有多少了解呢?本篇打算和大家一起来跟text-align来一次负距离的交往,你准备好了吗? text-align属性详解 The ...

  7. CSS 笔记一（Selectors/ Backgrounds/ Borders/ Margins/ Padding/ Height and Width）

    Selectors/ Backgrounds/ Borders/ Margins/ Padding/ Height and Width CSS Introduction: CSS stands for ...

  8. 【转】Styling And Animating SVGs With CSS

    原文转自:http://www.smashingmagazine.com/2014/11/03/styling-and-animating-svgs-with-css/?utm_source=CSS- ...

  9. 【轻松前端之旅】​CSS选择器中的空格与尖括号有何区别？

    CSS选择器中的空格与尖括号有何区别? 例子1: .a .b { margin: 0; } 空格隔开a和b,选择所有后代元素. 例子2: .a>.b { margin: 0; } 尖括号隔开a和 ...

  10. css绘制特殊图形，meida查询，display inline-box间隙问题以及calc()函数

    本文同时发表于本人个人网站 www.yaoxiaowen.com 距离上一篇文章已经一个月了,相比于写代码,发现写文章的确是更需要坚持的事情.言归正传,梳理一下这一个月来,在写ife任务时,有必要记录 ...

随机推荐

  1. javascript中定义事件的三种方式

    在javascript中,可以为某个元素指定事件,指定的方式有以下三种: 1.在html中,使用onclick属性 2.在javascript中,使用onclick属性 3.在javascipt中,使 ...

  2. Facebook公开其Hadoop与Avatarnode代码——有效解决Namenode顽疾

    Google在2004年创造了MapReduce,MapReduce系统获得成功的原因之一是它为编写需要大规模并行处理的代码提供了简单的编程模式.MapReduce集群可包括数以千计的并行操作的计算机 ...

  3. FATAL:NO bootable medium found!System halted.

    问题描述:致命错误,没有可引导的媒体.系统挂起.以下是在网上查的: 1:检查硬盘的类型,ide或sata接口是否在0,0或是在1,0. 2:光驱是否选择iso文件. 3:iso文件是否损坏4:virt ...

  4. ubuntu 执行apt-get update 提示无法获得锁

    问题如下: y@y:~$ sudo apt-get updateE: 无法获得锁 /var/lib/apt/lists/lock - open (11: 资源暂时不可用)E: 无法对目录 /var/l ...

  5. HTTP 错误 500.21 - Internal Server Error 处理程序“PageHandlerFactory-ISAPI-4.0_32bit”在其模块

    问题: 系统是win7.今天把我做过的项目发布后,在IIS上运行时一直出现一个错误,HTTP 错误500.21-Internal Server Error.处理程序“PageHandlerFactor ...

  6. Keil C51中函数指针的使用

    函数指针在C语言中应用较为灵活.在单片机系统中,嵌入式操作系统.文件系统和网络协议栈等一些较为复杂的应用都大量地使用了函数指针.Keil公司推出的C51编译器是事实上80C51 C编程的工业标准,它针 ...

  7. shell操作mysql

    参考: http://blog.csdn.net/hbcui1984/article/details/5125387

  8. yii第一个应用blog

    1. 连接到数据库 大多数 Web 应用由数据库驱动,我们的测试应用也不例外.要使用数据库,我们首先需要告诉应用如何连接它.修改应用的配置文件 WebRoot/testdrive/protected/ ...

  9. 【转】Android兼容性测试CTS --环境搭建、测试执行、结果分析

    原文网址:http://www.cnblogs.com/zh-ya-jing/p/4396918.html 为了确保Android应用能够在所有兼容Android的设备上正确运行,并且保持相似的用户体 ...

  10. JSTL解析——007——fmt标签库02

    各位亲们,近期事情比较多,没更新,come on! 1.<fmt:bundle>/<fmt:message>/<fmt:param>资源国际化标签 java中使用R ...