white-space共有5种属性normal，nowrap，pre，pre-wrap，pre-line

网上的解释多半过于详细冗长，先做个简化处理,以便查询

normal    忽略空白  过长换行

nowrap   忽略空白  绝不换行

pre         保留空白  无视限制

pre-wrap 保留空白  过长换行

pre-line   忽略空白  保留换行

实例如下:

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>testWhiteSpace</title>

        <style>

        /*pre代表保留换行   wrap代表保留空白 结合p本身性质*/

            .a {

                width: 200px;

            }

            .b1 {

                /*默认 忽略空白符 仅保留一小段  保障外部限制的前提下换行 被动换行 过长溢出*/

                white-space: normal;

            }

            .b2 {

                /*忽略空白符 保留一小段 绝对不换行 无论外部限制 除非遇见<br/>*/

                white-space: nowrap;

            }

            .b3 {

                /*保留所有空白 无视外部限制*/

                white-space: pre;

            }

            .b4 {

                /*保留空白 根据外部限制换行*/

                white-space: pre-wrap;

            }

            .b5 {

                /*合并空白 保留换行*/

                white-space: pre-line;

            }

        </style>

        <script src="js/angular.js"></script>

    </head>

    <body>

        <div class="a">4

            <p class="b1">testtestetst          testtestetst

                testtestetst          testtestetst

                testtestetst          testtestetst

                testtestetst          testtestetst

                testtestetst          testtestetst

                testtestetst          testtestetst

            </p>

        </div>

        <div class="a">

            <p class="b2">testtestetst          testtestetst

                testtestetst          testtestetst

                testtestetst          testtestetst

                testtestetst          testtestetst

                testtestetst          testtestetst

                testtestetst          testtestetst

            </p>

        </div>

        <div class="a">

            <p class="b3">testtestetst          testtestetst

                testtestetst          testtestetst

                testtestetst          testtestetst

                testtestetst          testtestetst

                testtestetst          testtestetst

                testtestetst          testtestetst

            </p>

        </div>

        <div class="a">

            <p class="b4">testtestetst          testtestetst

                testtestetst          testtestetst

                testtestetst          testtestetst

                testtestetst          testtestetst

                testtestetst          testtestetst

                testtestetst          testtestetst

            </p>

        </div>

        <div class="a">

            <p class="b5">te

                sttestetst          testtestetst

                testtestetst          testtestetst

                testtestetst          testtestetst

                testtestetst          testtestetst

                testtestetst          testtestetst

                testtestetst          testtestetst1111111111111111111111111111111111111111111111

            </p>

        </div>

    </body>

</html>

white-space详解的更多相关文章

  1. TestStack.White安装详解

    一.安装 NuGet TestStack.White是通过NuGet进行安装的.NuGet最低支持VS2010.我使用的VS2015. 安装方式一 :从Visual Studio的工具->扩展和 ...

  2. Flume启动运行时报错org.apache.flume.ChannelFullException: Space for commit to queue couldn't be acquired. Sinks are likely not keeping up with sources, or the buffer size is too tight解决办法（图文详解）

        前期博客 Flume自定义拦截器(Interceptors)或自带拦截器时的一些经验技巧总结(图文详解) 问题详情 启动agent服务 [hadoop@master flume-1.7.0]$ ...

  3. Netsuite Formula > Oracle函数列表速查(PL/SQL单行函数和组函数详解).txt

    PL/SQL单行函数和组函数详解 函数是一种有零个或多个参数并且有一个返回值的程序.在SQL中Oracle内建了一系列函数,这些函数都可被称为SQL或PL/SQL语句,函数主要分为两大类: 单行函数 ...

  4. SUBLIME TEXT 2 设置文件详解

    SUBLIME TEXT 2 设置文件详解 Preferences.sublime-settings文件: // While you can edit this file, it’s best to ...

  5. Sublime Text 设置文件详解

     Sublime Text 2是那种让人会一眼就爱上的编辑器,不仅GUI让人眼前一亮,功能更是没的说,拓展性目前来说也完全够用了,网上介绍软件的文章和推荐插件的文章也不少,而且很不错,大家可以去找找自 ...

  6. 过滤ASCII码中的不可见字符, ASCII三部分, 各控制字符详解, 去^@,^M

    今天产品部同事报告了一个BUG,经过调试发现,由于用户输入的字符串中,包含字符0x1E, 也就是”记录分隔符”(Record Separator, Notepad++ 显示为[RS]),导致JavaS ...

  7. Grub2配置详解(转)

    grub2基础教程-修订版                                      smallapple 目录 一.grub2新特性 二.grub2安装与启动 三.grub2配置文件 ...

  8. Asp.NetMVC利用LigerUI搭建一个简单的后台管理详解（函登录验证）

    上一篇 Asp.Net 中Grid详解两种方法使用LigerUI加载数据库数据填充数据分页  了解了LigerUI 中Grid的基本用法  现在结合上一篇的内容做一个简单的后台管理,当然也有前台的页面 ...

  9. [No0000137]字符编码详解

    摘要 本文主要介绍了字符编码的基础知识,以及常见的字符编码类型,比如ASCII,Unicode,UTF-8,ISO 8859等,以及各种编码之间的关系,同时专门解释了中文字符相关的编码标准,包括GB2 ...

  10. linux shell 脚本攻略学习16--wc命令详解，tree命令详解

    在文本处理的工作中,统计文件的行数,单词数和字符数非常有用.而对于开发人员本身来说,统计LOC(line of code ,代码行数)是一件重要的工作.linux中有什么命令可以帮助我们做统计呢?没错 ...

随机推荐

  1. iOS开发富文本

    NSMutableAttributedString * attributedStr = [[NSMutableAttributedString alloc] initWithString:@" ...

  2. 高精度之+×÷

    以下是三种高精度算术的模版: 高精度加法: ",s1,s2; ],ss2[],len; void dashu(string s1,int ss1[]) { ;i>=;i--) { ;j ...

  3. WebSocket的原理，以及和Http的关系

    一.WebSocket是HTML5中的协议,支持持久连接:而Http协议不支持持久连接. 首先HTMl5指的是一系列新的API,或者说新规范,新技术.WebSocket是HTML5中新协议.新API. ...

  4. 1bpp像素遍历(找了半天，感谢github)

    /// <summary> /// 获取比例 /// </summary> /// <param name="rect"></param& ...

  5. java抽象类的特点

    抽象类 抽象类的特点: 1.抽象类的方法可以是抽象的,也可以是不抽象的. 2.抽象类的方法可以全是抽象的,也可以全是不抽象的. 3.有抽象方法的类必须是抽象类,或者是接口(但是接口的方法定义必须是pu ...

  6. Find The Multiple（bfs）

    Find The Multiple Time Limit : 2000/1000ms (Java/Other)   Memory Limit : 20000/10000K (Java/Other) T ...

  7. eclipse设置java虚拟机内存大小

    设置java虚拟机大小可以让eclipse启动运行更快...... 在eclipse中点击window--preferences--java--Installed JREs. 然后看右边的框,鼠标点击 ...

  8. 关于oracle数据库（8）查询2

    筛选数据,直接加where条件,并且and,或者or 使用rownum获取前N条数据 select * from 表名 where rownum <= 数字; 如:获取前5条数据 select ...

  9. ADPCM编码和解码

    原文:http://www.znmcu.cn/znx_51_alltest_shell_fj_adpcm1.html ADPCM音频解码,其实放在这里有些不太合适. 在编写ZN-X开发板整板测试程序的 ...

  10. Java 处理图片 base64 编码的相互转换

    哈喽大家好我是刘德华. 今天项目优化了一下上传头像的功能.采用 imagecropper 插件完成裁剪图片的效果. 这个插件裁剪完的图片都是 base64 加密的字符串,上传头像也就涉及到了如何把加密 ...