<!doctype html>

<html lang="en">

 <head>

  <meta charset="UTF-8">

  <meta name="Generator" content="EditPlus®">

  <meta name="Author" content="">

  <meta name="Keywords" content="">

  <meta name="Description" content="">

  <title>间隔与间距实例</title>

  <style type="text/css">

  p.wordspacing{word-spacing:20px;}

/*  设置空格的长度*/

  p.letterspacing{letter-spacing:20px;}

/*  设置字间距*/

  p.lineheight{line-height:0.3;}

/*  设置行间距*/

  p.whitespace_normal{white-space:normal;}

/*  默认，忽略多个空格为1个，忽略回车符*/

  p.whitespace_pre{white-space:pre;}

/*  保留多个空格*/

  p.whitespace_nowrap{white-space:nowrap;}

/*  忽略回车符，禁止换行，直到遇到br*/

  p.whitespace_prewrap{white-space:pre-wrap;}

/*  保留所有空格符与回车符*/

  p.whitespace_preline{white-space:pre-line;}

/*  忽略多个空格为1个，保留回车*/

  </style>

 </head>

 <body>

  <p class="wordspacing">控 制 空 格 的 长 度</p>

  <p class="letterspacing">控制相邻两个字的间距</p>

  <p class="lineheight">使用百分比控制行间距</p>

  <p class="lineheight">使用像素值控制行间距</p>

  <p class="lineheight">使用数值（如1.2）控制行间距</p>

  <p class="whitespace_normal">空白符的默认处理，浏览器会忽略连续的多个空白符									为1个</p>

  <p class="whitespace_pre">空白符的pre处理，浏览器会保留      多个空白符，与pre标签相似</p>

  <p class="whitespace_nowrap">空白符的nowarp处理，浏览器会忽略

回车符直到遇到br<br />br之后的内容</p>

  <p class="whitespace_prewrap">保留多个    空白符，保留

回车符</p>

 <p class="whitespace_preline">忽略多个    空白符，保留

回车符</p>

 </body>

</html>

　　

css系列-间隔与间距实例的更多相关文章

  1. 深入理解脚本化CSS系列第六篇——脚本化伪元素的6种方法

    × 目录 [1]动态样式 [2]CSS类[3]setAttribute()[4]CSSRule对象添加[5]空样式覆盖[6]CSSRule对象删除 前面的话 我们可以通过计算样式来读取伪元素的样式信息 ...

  2. ASP.NET MVC+EF框架+EasyUI实现权限管理系列(6)- EF上下文实例管理

    原文:ASP.NET MVC+EF框架+EasyUI实现权限管理系列(6)- EF上下文实例管理 ASP.NET MVC+EF框架+EasyUI实现权限管系列 (开篇)   (1):框架搭建    ( ...

  3. css系列教程1-选择器全解

    全栈工程师开发手册 (作者:栾鹏) 一个demo学会css css系列教程1-选择器全解 css系列教程2-样式操作全解 css选择器全解: css选择器包括:基本选择器.属性选择器.伪类选择器.伪元 ...

  4. css 伪类选择器:checked实例讲解

    css :checked伪类选择器介绍 css :checked伪类选择器用于选择匹配所有被选中的单选按钮(radio)或复选框(checkbox),你可以结合:checked伪类选择器和:not选择 ...

  5. Java JUC之Atomic系列12大类实例讲解和原理分解

    Java JUC之Atomic系列12大类实例讲解和原理分解 2013-02-21      0个评论       作者:xieyuooo 收藏    我要投稿 在java6以后我们不但接触到了Loc ...

  6. mycat数据库集群系列之数据库多实例安装

    mycat数据库集群系列之数据库多实例安装 最近在梳理数据库集群的相关操作,现在花点时间整理一下关于mysql数据库集群的操作总结,恰好你又在看这一块,供一份参考.本次系列终结大概包括以下内容:多数据 ...

  7. CSS系列 (05)：浮动详解

    浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止.由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样. -- W3C 文字环绕 float可以 ...

  8. CSS系列——浏览器默认样式

    了解HTML标签在各浏览器当中的默认样式,可以让我们了解,为什么会要写Reset.css,Reset.css当中要怎么写样式最合理.试着思考下面的问题: 为什么会有默认样式? 每个浏览器的默认样式有什 ...

  9. css sprite讲解与使用实例

    转自:http://www.manongjc.com/article/886.html 一.什么是css sprites css sprites直译过来就是CSS精灵.通常被解释为“CSS图像拼合”或 ...

随机推荐

  1. MVC4.0网站发布和部署到IIS7.0上的方法【转：http://www.th7.cn/Program/net/201403/183756.shtml】

    最近在研究MVC4,使用vs2010,开发的站点在发布和部署到iis7上的过程中遇到了很多问题,现在将解决的过程记录下来,以便日后参考,整个过程主要以截图形式呈现 vs2010的安装和mvc4的安装不 ...

  2. java与IOS之间的RSA加解密

    很简单的一个需求,ipad端给密码RSA加密,传到java后台,解密.RSA加密算法是基于一个密钥对的,分为公钥和私钥,一般情况公钥加密,私钥解密,但也可私钥加密,公钥解密.还可以验签,就是先用私钥对 ...

  3. [转]分布式文件系统FastDFS架构剖析

    [转]分布式文件系统FastDFS架构剖析 http://www.programmer.com.cn/4380/ 文/余庆 FastDFS是一款类Google FS的开源分布式文件系统,它用纯C语言实 ...

  4. angularJS项目-ajax事件的按钮loading和页面loading状态 & Controller之间通信-待续

    1).按钮loading --TODO 2). page loading状态 1.在module中注入指令 // Route State Load Spinner(used on page or co ...

  5. 014--VS2013 C++ c++定时动画

    资源图片 //全局变量HBITMAP girl[7];HDC mdc, hdc;int num; //--------------------------------------------InitI ...

  6. MYSQL 一些用法

    LOAD DATA LOCAL INFILE 'C:/xampp/htdocs/test/file/sample.csv' INTO TABLE sample1 FIELDS TERMINATED B ...

  7. Ubuntu14.04搭建LAMP环境

    安装Apache2                                                             sudo apt-get install apache2   ...

  8. SAXReader

    DOM4j读取XML文件(SAXReader) 一. 总结: Document document=new SAXReader.reader(“xml文路径/文件名xxx.xml”);//得到Docum ...

  9. android 通过httpclient下载文件并保存

    代码:(主要针对图片.gif下载无问题) /** * 下载网络文件 * @param url 请求的文件链接 * @param IsMD5Name 是否MD5加密URL来命名文件名 * @param ...

  10. JavaScript 关于变量作用域的一道面试题

    ShineJaie 原创,转载请注明出处. 昨晚在一个交流群里看到有位网友提了一个他的面试题求助答疑.刚好我也有看到,就对这个问题思考了一下,觉得这道题对理解 JavaScript 作用域还是很有帮助 ...