CSS中white-space属性设置如何处理元素内的空白。
默认值normal表示:空白会被浏览器忽略。

white-space这个属性声明建立布局过程中如何处理元素中的空白符。值 pre-wrap 和 pre-line 是 CSS 2.1 中新增的。在IE8以上和火狐、Chrome中有效。

pre-wrap表示:保留空白符序列,但是正常地进行换行。

柯乐义pre-wrap10个空格 keleyi.com
柯乐义normal10个空格 keleyi.com
柯乐义nowrap10个空格 keleyi.com

<p style="white-space:nowrap">
柯乐义。
keleyi.com 。
这是<a href="http://keleyi.com/a/bjac/utovcdwr.htm" target="_blank">一些</a>文本。
这是一些文本。
http://keleyi.com/a/bjac/7q4sej2s.htm
这是一些文本。
</p>
上面代码的效果:

柯乐义。
keleyi.com 。
这是一些文本。
这是一些文本。
http://keleyi.com/a/bjac/7q4sej2s.htm
这是一些文本。

<p style="white-space:pre-wrap">
柯乐义。
keleyi.com 。
这是<a href="http://keleyi.com/a/bjac/utovcdwr.htm" target="_blank">一些</a>文本。
这是一些文本。 k e l e y i.c o m
http://keleyi.com/a/bjac/7q4sej2s.htm
这是一些文本。
</p>
上面代码的效果:

柯 乐 义。
keleyi.com 。
这是一些文本。
这是一些文本。
http://keleyi.com/a/bjac/7q4sej2s.htm
这是一些文本。

white-space的值:
normal 默认。空白会被浏览器忽略。
pre 空白会被浏览器保留。其行为方式类似 HTML 中的

 标签。
nowrap 文本不会换行,文本会在在同一行上继续,直到遇到
标签为止。
pre-wrap 保留空白符序列,但是正常地进行换行。
pre-line 合并空白符序列,但是保留换行符。
inherit 规定应该从父元素继承 white-space 属性的值。

原文:http://keleyi.com/a/bjac/7q4sej2s.htm

css中white-space的值pre-wrap的更多相关文章

  1. css中的position属性值的探究

    css的position属性指定了元素的定位类型,然后通过top,botton,left,right来具体定位. 在具体定位之前必须使用position属性,否则所有的具体定位属性都无法生效. pos ...

  2. CSS中vertical-align的默认值baseline的理解

    写在前面的话 在学校业余学习了一个月的CSS,人生中第一篇博客就献给CSS了,欢迎大家指正文章中不正确的地方,在此感谢.在尝试开始写博客的时候查了好多资料,原本以为写自己熟悉的知识的博客很容易,没想到 ...

  3. css中background-size的属性值

    length 设置背景图像的高度和宽度. 第一个值设置宽度,第二个值设置高度. 如果只设置一个值,则第二个值会被设置为 "auto". percentage 以父元素的百分比来设置 ...

  4. 理解CSS中position的各个值

    static position的默认值,没有定位,元素在normal flow中: fixed 相对于浏览器左上角定位: relative 相对定位元素,其位置根据其在normal flow中的位置来 ...

  5. css中height, width默认值

    转载自:https://www.cnblogs.com/heyode/p/5973960.html <body> <div class="wrap"> &l ...

  6. 在js中获取在css中设置的background-image值

    1. html部分 <div class="bg-color-two" id="bg_color_two" onclick="setBg(thi ...

  7. 教你彻底解决css中设置z-index的值无效的问题

    在使用z-index这个属性之前,我们必须先了解使用z-index的必要条件: 1.要想给元素设置z-index样式,必须先让它变成定位元素,说的明白一点,就是要给元素设置一个postion:rela ...

  8. css 中calc无效属性值问题

    width:calc(50%-20px); 这样书写是无效的因为calc中计算的两个因子同运算符号之间必须存在空格:

  9. CSS中的剪裁和遮罩

    剪裁和遮罩都是用来隐藏元素的一些部分.显示其他部分的.当然了,这两者还是有区别的.区别主要在于这几方面:他们能做的东西,不同的语法,涉及到的不同技术,是新的还是旧的,以及浏览器支持的差异. 但不幸的是 ...

  10. css tips —— 在css中完成国际化

    前提 在日常处理国际化的时候,通常是将key通过类似intl.xx(key)转换为对应环境的文案,可是如果需要在css中加入对应逻辑应该怎么做呢(比如在after的伪元素中显示不同的文案),毕竟在cs ...

随机推荐

  1. audio和video元素

    目录 [1]HTML元素 audio video source track[2]API 方法 属性 事件 audio专有 前面的话 HTML5新增了两个与媒体相关的标签,让开发人员不必依赖任何插件就能 ...

  2. 提高性能:用RequireJS优化Wijmo Web页面

    上周Wijmo 2014 V2版本刚刚发布(下载地址),  有网友下载后发现仅仅使用了40个Widgets的一小部分,还需要加载全部的jquery.wijmo-pro.all.3.20142.45.m ...

  3. Kubernetes系统架构简介--转

    原文地址:http://www.infoq.com/cn/articles/Kubernetes-system-architecture-introduction?utm_campaign=infoq ...

  4. Screenfly – 各种设备的屏幕和分辨率下快速测试网站

    Screenfly 让你能够在各种设备的屏幕和分辨率下查看你的网站.输入网址,并点击GO开始浏览网页.Screenfly 可以使用代理服务器来模拟设备,当您查看您的网站,代理服务器模仿您所选择的设备的 ...

  5. 2015年,从毕业到工作的几点感悟(Android开发新人)

    锄禾日当午,汗滴禾下土.       2015年,从毕业到工作的几点感悟(Android开发): 多用三方类库:(成长经验:尽量不要自己手动实现网络上已经有的优秀开源类库的功能,例如: 网络请求:常见 ...

  6. Fatal signal 11 (SIGSEGV) at 0x00000000 (code=1), thread 1755 (CrBrowserMain)问题

  7. TextView显示html文件中的图片

    fromHtml还有另一个重构:fromHtml(String source, Html.ImageGetter imageGetter, Html.TagHandler tagHandler) 而I ...

  8. 2.SDK目录结构和adb工具及命令介绍

    安卓开发学习笔记 1.安卓开发之环境搭建 2.SDK目录结构和adb工具及命令介绍 1.SDK目录介绍: ******************************** add-ons:Androi ...

  9. Azure China (12) 域名备案问题

    <Windows Azure Platform 系列文章目录> (1) 默认情况下,我们在创建的Azure 服务,默认使用的DNS地址为: http://xxx.chinacloudapi ...

  10. SQL Server安全(3/11):主体和安全对象(Principals and Securables)

    在保密你的服务器和数据,防备当前复杂的攻击,SQL Server有你需要的一切.但在你能有效使用这些安全功能前,你需要理解你面对的威胁和一些基本的安全概念.这篇文章提供了基础,因此你可以对SQL Se ...