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. EasyuiAPI：布局

    一.Panel(面板) 1.通过标签创建: <div id="p" class="easyui-panel" title="My Panel&q ...

  2. Qt ImageProvider 的使用

    QQuickImageProvider 是一个可以支持在QML中使用 qpixmap 和 图片加载线程的类. 它支持在qml中使用Image加载的高级特性, 包括 使用 QPixmap 替代实际的im ...

  3. linux mysql-server和mysql-client

    我认为server和client是DBMS的两个面向不同操作对象的工具.server是DBMS面向物理层次,包含存储数据的一系列机制.处理方法的集成:client是DBMS面向用户,提供一系列工具为用 ...

  4. Debian上安装java

    Debian 8 Jessie上安装命令: echo "deb http://ppa.launchpad.net/webupd8team/java/ubuntu trusty main&qu ...

  5. Integer.valueOf(int)及自动装箱内幕

    Integer为什么要提供功能与new Integer(xx)一样的valueOf(xx)方法呢,看了源代码之后,我发现了惊人的内幕. public static Integer valueOf(in ...

  6. Chapter 16_4 私密性

    在Lua面向对象编程的基础设计当中,没有提供私密性机制.但是可以用其他方法实现,从而获得对象的访问控制. 这种实现不常用,作为兴趣爱好,只做基本了解. 基本做法是:通过两个table来表示一个对象.一 ...

  7. java实现UDP聊天---转载

    import java.io.*; import java.net.*; class Send implements Runnable { private DatagramSocket ds; pub ...

  8. c/c++常用的几个关键字总结

    一.volatile volatile提醒编译器它后面所定义的变量随时都有可能改变,因此编译后的程序每次需要存储或读取这个变量的时候,都会直接从变量地址中读取数据.如果没有volatile关键字,则编 ...

  9. 本元鼠标自动点击器 v1.31 官方绿色版

    软件名称: 本元鼠标自动点击器软件语言: 简体中文授权方式: 免费软件运行环境: Win 32位/64位软件大小: 516KB图片预览: 软件简介:本元鼠标自动点击器是一款免费绿色版的鼠标自动点击器, ...

  10. 【strtok()】——分割字符串

    对字符串进行分割: 在使用前需要先初始化例如: char * p=strtok(Str," ");/*初始化以" "(以空格字符来分割字符串),即把" ...