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. Microsoft Visual Studio 2015 python 安装 mysql-python 出错解决

    Microsoft Visual Studio 2015 安装 python 连接包 mysql-python出错   第一种 pip安装方式 安装Microsoft Visual C++ Compi ...

  2. mybatis 查询语句(按条件查询)

    <select id="getAllDitch" parameterType="xxx.xx.entity.CheckDitch" resultType= ...

  3. dplyr 数据操作 数据排序 (arrange)

    在R中,我们在整理数据时,经常需要对数据排序,以便数据增强数据的可读性. 下面我们来看下dplyr中的,arrange函数 arrange(.data, ...) 跟filter()类似,arrang ...

  4. bzoj4318: OSU!&&CF235BLet's Play Osu!

    题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=4318 4318: OSU! Time Limit: 2 Sec  Memory Limit ...

  5. Mysql字符集修改为UTF8

    修改/etc/my.cnf,这个文件是安装的时候拷贝过去的 修改方法: [client]下添加 default-character-set=utf8 [mysqld]下添加 character-set ...

  6. LeetCode OJ 64. Minimum Path Sum

    Given a m x n grid filled with non-negative numbers, find a path from top left to bottom right which ...

  7. LeetCode OJ 63. Unique Paths II

    Follow up for "Unique Paths": Now consider if some obstacles are added to the grids. How m ...

  8. Matlab - 线性方程组求解

    常用函数:det 计算矩阵的行列式的值inv 求矩阵的逆阵rank 求矩阵的秩[V D]=eig(A) 求矩阵A的特征值和特征向量poly 求矩阵的特征多项式rref 用初等变换将矩阵化成行阶梯形nu ...

  9. vultr vps官网改版免费注册教程（最新优惠码）

    本站强烈推荐的,国外超高性价比vps服务器Vultr官方网站最近更新了,导致一些朋友心生茫然,今天写个简易教程给大家. 首先是打开vultr官网,免费注册一个vultr账号.填写邮箱地址.密码,非常简 ...

  10. Openjudge-计算概论（A）-求一元二次方程的根

    描述: 利用公式x1 = (-b + sqrt(b*b-4*a*c))/(2*a), x2 = (-b - sqrt(b*b-4*a*c))/(2*a)求一元二次方程ax2 + bx + c =0的根 ...