《耐人寻味的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的更多相关文章

  1. 耐人寻味的CSS属性font-family

    font-family是一个网站用户体验的第一入口,非常有必要花功夫来研究一下.我们首先需要了解衬线字体和无衬线字体,接着了解中英文的常用字体及其适用性. 衬线字体 衬线(serif)的笔画有粗有细的 ...

  2. CSS基础学习-6.CSS属性_列表、表格

  3. CSS基础学习-5.CSS属性_字体文本文本装饰

  4. CSS基础学习-4.CSS属性_背景、颜色、边框

  5. 重拾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映射到 ...

  6. 重拾CSS基础—开篇

    由来 从事软件行业一晃也5年有余,之间参与过若干个基于web的项目,所以javascript和Html基本已经相当熟悉,最近对于web前端开发比较关注,分析后发现CSS的确是自己的弱项,于是决定再加强 ...

  7. CSS魔法堂:重拾Border之——更广阔的遐想

    前言  当CSS3推出border-radius属性时我们是那么欣喜若狂啊,一想到终于不用再添加额外元素来模拟圆角了,但发现border-radius还分水平半径和垂直半径,然后又发现border-t ...

  8. CSS魔法堂:重拾Border之——图片作边框

    前言  当CSS3推出border-radius属性时我们是那么欣喜若狂啊,一想到终于不用再添加额外元素来模拟圆角了,但发现border-radius还分水平半径和垂直半径,然后又发现border-t ...

  9. CSS魔法堂:重拾Border之——不仅仅是圆角

    前言  当CSS3推出border-radius属性时我们是那么欣喜若狂啊,一想到终于不用再添加额外元素来模拟圆角了,但发现border-radius还分水平半径和垂直半径,然后又发现border-t ...

随机推荐

  1. cygwin报错 /bin/bash: Operation not permitted

    如题,使用Cygwin过程中本来好好的,突然就不能登录了,每个用户登录都报错 /bin/bash: Operation not permitted.开始也以为是没有权限之类的,重装弄了很久也不行.后面 ...

  2. 《Java基础知识》Java集合(Map)

    Java集合主要由2大体系构成,分别是Collection体系和Map体系,其中Collection和Map分别是2大体系中的顶层接口. 今天主要讲:Map主要有二个子接口,分别为HashMap.Tr ...

  3. Python活力练习Day2

    Day2:求1000以内的素数 #素数:除了1和它本身外,不能被其他自然数整除 #判断素数的方法:1).暴力法:从2到n-1每个数均整除进行判断   2).开根号法:从2到sqrt(n)均做整除判断( ...

  4. Nginx配置实例-反向代理实例:根据访问的路径跳转到不同端口的服务中

    场景 Ubuntu Server 16.04 LTS上怎样安装下载安装Nginx并启动: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/detai ...

  5. day06数组、数组声明和赋值、数组复制、数组排序

    复习 1.do-while 1)语法 do{ //循环体 }while(<条件>); 2.while和do-while 1)while 先判断,后执行 初始条件不满足,一次都不执行 2)d ...

  6. 【STM32-V5】STM32F407开发板开源, 丰富软件资源, 强劲硬件配置, 配套500实例, 10套手册带视频教程2019-12-12

    淘宝购买地址:购买地址链接 从2013年5月份发布至今,开发板硬件更新过6个版本,软件资料更新过85次.当前标准库最新版本V8.8,HAL库最新版本V1.1 安富莱微信公共平台,欢迎大家关注(打造高质 ...

  7. python函数编程-装饰器decorator

    函数是个对象,并且可以赋值给一个变量,通过变量也能调用该函数: >>> def now(): ... print('2017-12-28') ... >>> l = ...

  8. JDK性能分析与故障处理-命令行

    一.命令演示登录主机:21docker ps -a | grep 'hub.ecs.com:6999/open_pro.*open-pro-apple2'docker exec -it ID /bin ...

  9. JavaScript for 、for...of 、for...in 等 iteration 效率测试

    由于不同浏览器,不同版本性能不一,且控制台本质是是套用了一大堆eval,沙盒化程度高,所以需使用node环境测试来提高准确性 // 准备待测数组 const NUM = 1e7; let arr = ...

  10. 利用zabbix API 统计一段时间内监控项的均值和峰值

    #coding:utf-8 #给定主机IP获取一段时间内cpu的均值和峰值并写入文件(txt,可以跑完后直接把后缀名改为csv以表格形式打开):需要指定IP文件 import requests imp ...