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. scroll、client和offset的区别

    scroll.client和offset的区别:http://www.cnblogs.com/pcd12321/p/4448420.html

  2. 读书笔记之ado.net entity framework

    提供了对数据访问的一种抽象层,是更加易于以编程的方式来操作及管理数据 有以下几种模式:Model First, Database First, and Code First 现在主要讨论code Fi ...

  3. hdu_5889_Barricade(最小割+最短路)

    题目链接:hdu_5889_Barricade 题意: 有n个点,m条边,每个边的长度都为1,每个边有一个消耗w,如果要阻断这条路,那么就会消耗w,现在让你阻断点1到点n的所有最短路,问你最小的消耗是 ...

  4. LeetCode OJ 75. Sort Colors

    Given an array with n objects colored red, white or blue, sort them so that objects of the same colo ...

  5. TimeJob权限问题 拒绝访问

    internal void RenameWithoutValidation(string value) {     if (value == null) throw new ArgumentNullE ...

  6. quicksort快排

    废话不多说,上代码: void quicksort(int x[], int lo, int hi){ int i = lo, j = hi; ]; while(i <= j){ while(x ...

  7. zookeeper的安装及集群配置

    1.解压 2.修改配置文件 cp zoo_sample.cfg zoo.cfg vim zoo.cfg dataDir=/usr/local/zookeeperData 其余采用默认 参数说明: ti ...

  8. 程序开发：MVC设计模式与应用

    MVC全名是Model View Controller,是模型(model)-视图(view)-控制器(controller)的缩写,一种软件设计典范,用一种业务逻辑.数据.界面 显示分离的方法组织代 ...

  9. Dialog对话框管理工具类

    import android.app.Dialog; import android.content.Context; import android.content.DialogInterface; i ...

  10. js 时间

    <html> <head> <meta charset="utf-8" /> <title></title> <s ...