【目录】

white-space详解
- 属性介绍
- 属性使用
  - 一、列表溢出换行处理
  - 二、文字溢出省略处理
  - 三、文字展示

white-space 属性设置处理元素内的空白，所谓空白有哪些？

Space(空格)、Enter(回车)、Tab(制表符)

我们熟知的是：

在开发中，无论我们敲多少空格和回车，显示在页面上的都会合并成一个。
我们的文字在超过一行的情况下，就会自动换行。

属性介绍

但是开发的要求各种各样，white-space的功能属性也很强大，可以有各种各样的不同效果，下面来看一张图：

whiteSpace.png

这个古诗是怎么打出来的呢？

床(空格)前(空格)(空格)(空格)(空格)明月光，疑是地上霜
（回车）
举头望明月，低头(Tab)思故乡

下面一个表格来说明一下出现这种情况的原因：

属性	效果	兼容
normal(默认)	所有空格、回车、制表符都合并成一个空格，文本自动换行	IE7\IE6+
nowrap	所有空格、回车、制表符都合并成一个空格，文本不换行	IE7\IE6+
pre	所有东西原样输出，文本不换行	IE7\IE6+
pre-wrap	所有东西原样输出，文本换行	IE8+
pre-line	所有空格、制表符合并成一个空格，回车不变，文本换行	IE8+
inherit	继承父元素	IE不支持，不推荐用

属性使用

一、列表溢出换行处理

同样是320px的手机，iphone4可以在一行显示，但是安卓端就会有错位现象，这个开始让我很头疼：
ios端

row.png

andriod

overrow.png

这样的话使用媒体查询也无法处理，所以在这一行的父元素中设置，所有的元素强制一行显示。

ul{white-space: nowrap; /*强制内容在一行显示*/overflow:hidden; /*超出部分隐藏*/ }

二、文字溢出省略处理

文字超出去怎么办？

overtext.png

一般都自动换行了，想要文字溢出的部分自动用省略号表示，那么离不开三个属性:

white-space: nowrap; /*强制内容在一行显示*/
overflow: hidden;/*超出部分溢出*/ text-overflow: ellipsis;/*溢出的部分使用省略号*/

可以看到下面的效果:

overEllipsis.png

三、文字展示

如果是显示诗歌，或者文案之类的，很多情况需要输入什么样子，出来什么样子。

poetry.png

这个时候用pre属性是最合适的(毕竟兼容性最好么):

white-space:pre;

转载于:https://www.cnblogs.com/dingxingxing/p/11184393.html

white-space详解相关推荐

TestStack.White安装详解
参考: http://teststack.azurewebsites.net/White/GettingStarted.html 1. 使用VS2010以上版本因为TestStack.White是通 ...
jvm from space 很小_JVM真香系列：堆内存详解
前面的文章中已经有所提到过堆,只是大致介绍了一下.本文就来详细聊聊JVM中的堆. 在 JVM中,堆被划分成两个不同的区域:新生代 ( Young ).老年代 ( Old ). 新生代 ( Young ...
三星r750美版刷Android,这是才是全面派三星space monitor详解
01三星space monitor详解进入"冷兵器办公"时代,每个人每天都在和显示器打交道,如何选一款满足使用场景需求的显示器真的很重要:选对了对眼睛和颈椎还算友好,要是买错了体 ...
计算机各键的名称和作用,space是什么键键盘键位名称及功用详解
键盘是操作计算机必备的输入设备,很多用户天天使用着键盘,那么你对键盘的真的熟悉吗?知道space是什么键吗?可能还有很多用户对键盘的很多键位的名称和作用都不知道,下面就为大家详细的介绍键盘键位名称及功 ...
计算机各键的名称和作用,space是哪个键键盘各键位名称及功用详解
摘要腾兴网为您分享:space是哪个键键盘各键位名称及功用详解,之了课堂,云南移动,宜信,学堂在线等软件知识,以及winrar安卓,国泰君安大智慧5,邮政app,骑驴网,s2520打印机,b站,我的 ...
计算机主机按键名称,space是哪个键各种电脑键位名称及功用详解【图文】
space,这个词不知道大家有没有听过或是见过.反正小编是知道的.嘿嘿--好吧言归正传,space就是一种我们电脑命令的一种.它属于某个键位的名字,其实我们有很多朋友都是只认识我们键盘上的26个英文字 ...
java.lang.OutOfMemoryError: PermGen space基于idea,MyEclipse或tomcat的详细解决方法以及详解JVM配置参数
文章目录 1. 引出问题 2. 分析问题 3. 解决问题 3.1 手动设置tomcat的MaxPermSize大小 3.2 基于MyEclipse的修改 3.3 基于idea的修改 4. jvm配置参 ...
极限定律 My Algorithm Space AC自动机算法详解
转载自:http://www.cppblog.com/mythit/archive/2009/04/21/80633.html 首先简要介绍一下AC自动机:Aho-Corasick automatio ...
Sublime Text 2/3 配置文件详解
Sublime Text 3 是一款具有代码高亮.语法提示.自动完成且反应快速的编辑器软件,不仅具有华丽的界面,还支持插件扩展机制,用她来写代码,绝对是一种享受.收藏一份 Sublime Text 2 ...
ShadeGraph教程之节点详解1：Artistic Nodes
本文首发于洪流学堂微信公众号. 洪流学堂,学Unity快人几步洪流学堂公众号回复节点,获取ShaderGraph节点详解PDF文件(带目录). 注意节点中很多输入为In(1)的其实是动态长度的Ve ...

white-space详解