css中的white-space属性

css中的white-space用来处理布局过程中元素内的空白符。

white-sapce:

normol: 默认值，空白会被浏览器忽略。

<html><head><title>WhiteSpace</title><style type = "text/css">span {white-space: normal;background: silver;}</style></head><body><span>      Some text。Some text。Some text。</span></body>
</html>

运行结果：
元素标签两端的空白符被忽略，但字符之间的空白保留。

pre: 元素之间的空白符不被忽略。类似HTML标签中的<pre>

<html><head><title>WhiteSpace</title><style type = "text/css">span {white-space: normal;background: silver;}</style></head><body><span>      Some text。Some text。Some text。</span></body>
</html>

运行结果(火狐):

可以看到标签元素之间的空白符被保留了。

nowrap: 文本不会换行，文本会在一行之间继续，直到遇到 标签

<html><head><title>WhiteSpace</title><style type = "text/css">span {white-space: nowrap;background: silver;}div {width: 200px;background: gold;padding: 10px;}</style></head><body><div><span>      Some text。Some text。Some text。Some text。Some text。Some text。Some text。Some text。</span></div></body>
</html>

运行结果:

元素标签之间的空格以及每行换行符被忽略。文本但是文本不会自动换行，一直溢出了div框。

<html><head><title>WhiteSpace</title><style type = "text/css">span {white-space: pre-wrap;background: silver;}</style></head><body><span>      Some text。Some text。Some text。</span></body>
</html>

运行结果(火狐)：

元素标签之间的空白被保留，换行符也被保留。

pre-line: 合并空白符序，但是保留换行符。

<html><head><title>WhiteSpace</title><style type = "text/css">span {white-space: pre-line;background: silver;}</style></head><body><span>      Some text。Some text。Some text。</span></body>
</html>

运行结果:

元素标签之间的空白符被忽略，但是换行符被保留。

总之，white-space控制的就是表亲两端的空白符以及换行符的显示。

转载于:https://www.cnblogs.com/chaoguo1234/archive/2013/03/03/2941665.html

css中的white-space属性相关推荐

css中字体与段落属性设置/文本高级样式
CSS中字体与段落属性毫无疑问,不管什么网站,文字一定是必不可少.文字可以是网页传播信息的主要手段.那么怎么显示文字,才能更加的美观,那么大家需要了解以下文字属性. 字体属性属性用途语法(一些 ...
[css] css中的选择器、属性、属性值区分大小写吗？
[css] css中的选择器.属性.属性值区分大小写吗? 选择器和属性区分大小写,属性值如果是颜色可以不区分大小写吧个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢 ...
妙味css3课程---1-1、css中自定义属性可以用属性选择器么
妙味css3课程---1-1.css中自定义属性可以用属性选择器么一.总结一句话总结:可以的. 1.如何实现用属性选择器实现a标签根据href里面含有的字段选择背景图片? p a[href*=te ...
css中reset属性详解,css中如何使用counter-reset属性
css中如何使用counter-reset属性发布时间:2020-09-23 14:26:58 来源:亿速云阅读:83 作者:小新这篇文章主要介绍css中如何使用counter-reset属性, ...
CSS中内容的剪切属性clip
1. 在CSS中,可以使用剪切属性对元素内容的可视化区域进行控制,剪切区域所使用的属性时clip属性, 用来裁剪元素的可视化区域,内容的剪切属性可以使用2种属性值,一种为auto值,另一种为区域值,语 ...
php中li标签,li标签有哪些属性？css中li标签的属性详解
在html中,我们经常会遇到li标签,那么li标签有哪些属性?下面我们来了解一下css中li标签的属性. 一:标签有哪些属性在html中,使用css中li标签来控制样式,很多网站上都是点为开头,也有 ...
html cellpadding css,CSS中cellspacing和cellpadding属性用法
CSS中cellspacing和cellpadding属性的使用是否了解,这里和大家分享一下,cellspacing属性设置表格边框之间和表格单元格之间的间距(以像素为单位):cellpadding属 ...
css中的 type,css中如何使用list-style-type属性
css中如何使用list-style-type属性发布时间:2020-09-24 10:05:15 来源:亿速云阅读:88 作者:小新小编给大家分享一下css中如何使用list-style-ty ...
css中overflow:hidden的属性可能会导致js下拉菜单无法显示
css中overflow:hidden属性导致ExtJS中无法显示下拉滚动条 overflow属性: visible 默认.内容不会被修剪,会呈现在元素之外. hidden 内容会被修剪,但是浏览器不 ...
总结一下CSS中的定位 Position 属性
在CSS中,Position 属性经常会用到,主要是绝对定位和相对定位,简单的使用都没有问题,尤其嵌套起来,就会有些混乱,今记录总结一下,防止久而忘之. CSS position 属性值: absol ...

css中的white-space属性

css中的white-space属性相关推荐

最新文章

热门文章