【重拾基础】耐人寻味的CSS属性white-space
《耐人寻味的CSS属性white-space》,本文说的white-space
是一个控制换行和空白处理的CSS
属性。我曾经被这个属性烦死,一直没记住,今天决定还是写下来好好琢磨下。
属性值
normal
默认值,正常换行,空白和换行符会被浏览器忽略。啥意思呢?
正常换行的意思是,单词间会正常换行,如果下一个单词太长,不足以在当前行剩余部分完整展示,则会在下一行显示。哪些情况算一个单词呢?
一个中文字
一个英文单词
// 这是两个单词
Tusi Blog
// 这只算一个单词
TusiBlog
连续的数字或符号也只算一个单词
// 这只算一个单词,如果超长也不会换行,会挤出横向滚动条
10000000000000000000000+2000000000000000000*200000000000000
空白和换行符会被浏览器忽略。就是你输入连续的空格,只会表现出一个空格的效果;如果敲了回车,也不会换行。
<!-- 代码 -->
<div>00000000 00000000000000000></div>
<!-- 实际效果 -->
00000000 00000000000000000
pre
- 行为方式类似
HTML
中的pre
标签。pre
标签一般用来包裹源代码。 - 不会自动换行(想想,你写代码时,不回车会换行吗?),除非在文本中遇到换行符(敲了回车)或使用了
br
标签。 - 空白会被浏览器保留。意思就是连续的空格会被保留,不会合并成一个。
nowrap
不换行,内容再多也不换行。
忽略换行符,也就是说回车也不会换行,直到遇到
br
标签为止。
pre-wrap
- 正常换行
- 连续的空白符会被保留
- 换行符(回车)也是有效的
pre-line
- 正常换行
- 连续空白符会被合并成一个
- 换行符(回车)也有效
inherit
继承父元素的white-space
属性值
总结
可以从几个方面来对比下这几种属性值的差异。
是否正常换行 | 是否合并连续空白符 | 换行符是否有效 | |
---|---|---|---|
normal | 是 | 是 | 否 |
pre | 否 | 否 | 是 |
nowrap | 否 | 是 | 否 |
pre-wrap | 是 | 否 | 是 |
pre-line | 是 | 是 | 是 |
妈呀,还是挺难记的,多多复习!
扫一扫下方小程序码或搜索Tusi博客
,即刻阅读最新文章!
【重拾基础】耐人寻味的CSS属性white-space的更多相关文章
- 耐人寻味的CSS属性font-family
font-family是一个网站用户体验的第一入口,非常有必要花功夫来研究一下.我们首先需要了解衬线字体和无衬线字体,接着了解中英文的常用字体及其适用性. 衬线字体 衬线(serif)的笔画有粗有细的 ...
- CSS基础学习-6.CSS属性_列表、表格
- CSS基础学习-5.CSS属性_字体文本文本装饰
- CSS基础学习-4.CSS属性_背景、颜色、边框
- 重拾Java Web应用的基础体系结构
目录 一.背景 二.Web应用 2.1 HTML 2.2 HTTP 2.3 URL 2.4 Servlet 2.4.1 编写第一个Servlet程序 2.5 JSP 2.6 容器 2.7 URL映射到 ...
- 重拾CSS基础—开篇
由来 从事软件行业一晃也5年有余,之间参与过若干个基于web的项目,所以javascript和Html基本已经相当熟悉,最近对于web前端开发比较关注,分析后发现CSS的确是自己的弱项,于是决定再加强 ...
- CSS魔法堂:重拾Border之——更广阔的遐想
前言 当CSS3推出border-radius属性时我们是那么欣喜若狂啊,一想到终于不用再添加额外元素来模拟圆角了,但发现border-radius还分水平半径和垂直半径,然后又发现border-t ...
- CSS魔法堂:重拾Border之——图片作边框
前言 当CSS3推出border-radius属性时我们是那么欣喜若狂啊,一想到终于不用再添加额外元素来模拟圆角了,但发现border-radius还分水平半径和垂直半径,然后又发现border-t ...
- CSS魔法堂:重拾Border之——不仅仅是圆角
前言 当CSS3推出border-radius属性时我们是那么欣喜若狂啊,一想到终于不用再添加额外元素来模拟圆角了,但发现border-radius还分水平半径和垂直半径,然后又发现border-t ...
随机推荐
- 深入学习socket网络编程,以java语言为例
了解java的socket编程与Linux Socket API之间的关系 一.java的网络编程 1.socket原理 socket通信就是通过IP和端口号将两台主机建立连接,提供通信.主机A的应用 ...
- Java面向对象之初始化块
目录 Java面向对象之初始化块 普通初始化块 静态初始化块 初始化块与构造器 Java面向对象之初始化块 在程序设计中,让数据域正确地执行初始化一直是一个亘古不变的真理. 那么,有哪些手段可以初始化 ...
- 线程提供了一个方法:void join() ,join可以协调线程之间的同步运行。
package seday09; /** * @author xingsir * 线程提供了一个方法:void join() ,join可以协调线程之间的同步运行. * 此方法允许执行这个方法的线程在 ...
- RecyclerView 添加自定义分割线
默认的浅灰色的分割线在某些时候并不能满足我们的要求,这时就需要自定义分割线了. 我们可以通过两种方式来实现:调用 DividerItemDecoration.setDrawable 方法或者继承实现 ...
- Android utils 工具类之MD5加密 MD5Utils
实际开发过程中,密码不会保存明文形式,容易被别人窃取. MD5加密是不可逆的加密算法,只能由明文转换成密文. 但是有些人通过将明文对应的密文保存在数据库中,进行查询破解密文.为防止这种解密,根据许多对 ...
- VMware 虚拟机黑屏问题
VMware Workstation 14打开虚拟机黑屏解决方法 听语音 浏览:0 | 更新:2017-11-21 16:56 | 标签:操作系统 虚拟机 VMWARE 1 2 3 4 分步阅读 最近 ...
- Linux.centos安装mysql5.7.18
一:删除已有的mysql步骤 1 卸载旧的mysql 1.1 查询有哪些mysql文件 [root@zookeeper init.d]# find / -name mysql /var/lock/su ...
- python 内置函数zip,map,三元,lambda表达式
#内置函数zip(),将多个可迭代对象(集合等)按照顺序进行组合成tuple元祖,放在zip 对象进行存储,: #当参数为空时候,返回空 #如果 zip() 函数压缩的两个列表长度不相等,那么 zip ...
- 第二个视频作品《[SpringCloudAlibaba]微服务之注册中心nacos》上线了
1.场景描述 第二个视频作品出炉了,<[SpringCloudAlibaba]微服务之注册中心nacos>上线了,有需要的朋友可以直接点击链接观看.(如需购买,请通过本文链接购买) 2. ...
- Spring Boot Starters到底怎么回事?
前言 上周看了一篇.你一直在用的Spring Boot Starters究竟是怎么回事(https://www.cnblogs.com/fengzheng/p/10947585.html) 感觉终 ...