您的位置:首页> 前端教程> CSS3教程
文章导航

CSS white-space

2019-9-17 08:57| 作者: admin| 查看: 1266| 评论: 0|来自: 蚂蚁部落

在其他很多文章反复强调过,掌握一个知识点可以从其名称入手。

因为其名称在一定程度上体现它的功能,自然对white-space属性的学习也不例外。

此属性的名称由两个单词构成,分别如下:

(1).white:翻译成函数具有"白或者白色"的意思。

(2).space:翻译成汉语具有"空间"的意思。

恰如其名,此属性用来规定浏览器如何处理元素中的空白字符,比如使用空格键输入的字符。

产生空白字符的方式有很多种,例如空格(" ")、换行("\n")、缩进("\t")等。

特别说明:

(1).此属性是CSS2.0增加,为了属性排版介绍方便放入CSS3教程板块。

(2).CSS3.0对此属性进行了一些加强,比如可以对<textarea>元素或者SVG元素生效。

CSS属性通常都是非常简单的,但总是让人感觉比较繁琐,尤其是当属性值功能非常类似的时候。

下面分步通过代码实例详细介绍一下white-space属性值的功能,由此也可以体现它们之间的区别在哪。

语法结构:

[CSS] 纯文本查看 复制代码
white-space:normal | pre | nowrap | pre-wrap | pre-line

在对属性值逐一分析之前,首先对属性值涉及的单词进行一下解析,有助于理解。

(1).pre:是preserve的缩写,表示"保留"的意思。

(2).wrap:具有"盘绕或者包裹"的意思,也就是可以换行,自然nowrap就是不可以换行。

属性值解析:

(1).normal:默认值,多个空格会被合并为一个,换行被当做一个空格处理,根据容器宽度换行。

(2).pre:规定保留空格,有几个空格保留几个空格,源码中的换行与<br>生效,不根据容器宽度换行。

(3).nowrap:规定元素内的字符串不换行,多个空格会被合并,源码中的换行无效,但是<br>生效。

(4).pre-wrap:规定保留空格,源码中的换行与<br>生效,同时也根据容器宽度换行。

(5).pre-line:规定合并空格,源码中的换行与<br>生效,同时也根据容器宽度换行。

如果看到上面的属性阐述感觉还没有完全明白,不用担心,后面会有详细的代码演示。

浏览器支持:

(1).IE浏览器支持此属性。

(2).edge浏览器支持此属性。

(3).谷歌浏览器支持此属性。

(4).火狐浏览器支持此属性。

(5).opera浏览器支持此属性。

(6).safria浏览器支持此属性。

特别说明:当前只有在火狐浏览器中,此属性才会对SVG元素生效。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
div {
  width:250px;
  height:50px;
  background-color:#ccc;
  white-space:normal;
}
</style>
</head>
<body>
<div>JavaScript    is a lightweight programming language</div>
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201902/13/111559r8rl021zbrlw4afj.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

代码分析如下:

(1).多个空格会被合并为一个空格,字符串会根据容器的宽度换行(连续数字或者字符串可能会冲破布局)。

(2).代码内部的换行会被当做一个空格处理,<br>会生效(上面没有演示,但是不要忽略)。

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
div {
  width:250px;
  height:70px;
  background-color:#ccc;
  margin:25px;
  white-space:pre;
}
</style>
</head>
<body>
<div>JavaScript    is a lightweight programming language</div>
<div>JavaScript 
  is a programming<br> language</div>
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201902/13/111638xkqsy3w3ch6heqqy.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

代码分析如下:

(1).多个空格会被保留,有几个空格保留几个空格。

(2).内容会冲破布局不会自动根据容器宽度换行。

(3).源码内的换行会生效,<br>标签换行也会生效。

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
div {
  width:250px;
  height:50px;
  background-color:#ccc;
  margin:25px;
  white-space:nowrap;
}
</style>
</head>
<body>
<div>JavaScript    is a lightweight programming language</div>
<div>JavaScript 
  is a programming<br> language</div>
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201902/13/111701wmwuwztuy0uusipo.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

代码分析如下:

(1).多个连续的空格会被合并为一个,不会根据容器的宽度自动换行。

(2).源码中的换行会被当做一个空格处理。

(3).<br>标签会生效。

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
div {
  width:250px;
  height:70px;
  background-color:#ccc;
  margin:25px;
  white-space:pre-wrap;
}
</style>
</head>
<body>
<div>JavaScript    is a lightweight programming language</div>
<div>JavaScript 
  is a programming<br> language</div>
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201902/13/111729hxd62jcjcz2ct3ea.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

代码分析如下:

(1).多个空格不会被合并,有几个算几个。

(2).内容会根据容器的宽度自动换行。

(3).源码内的换行会生效,br换行也会生效。

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
div {
  width:250px;
  height:70px;
  background-color:#ccc;
  margin:25px;
  white-space:pre-line;
}
</style>
</head>
<body>
<div>JavaScript    is a lightweight programming language</div>
<div>JavaScript 
  is a programming<br> language</div>
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201902/13/111753m3rncfr2ynnxzngv.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

代码分析如下:

(1).行内的多个空格会被合并为一个空格。

(2).会根据容器的宽度自动换行。

(3).源码内的换行会被保留。

(4).行首的空格被删除。

(5).br会生效,起到换行效果。

1

鲜花

握手

雷人

路过
1

鸡蛋

刚表态过的朋友 (2 人)

最新评论

返回顶部