不简单的 white-space 属性

white-space 是 CSS 的属性。从字面上来看,这是一个与空白相关的属性。好像也没啥东西,但从其实没那么简单。

详细介绍

white-space 属性可以包括以下 3 个方面内容

**1 如何处理文本内容中的多个空格和 Tab? ** 策略1: 折叠。如果多个空格和 Tab 在文本内容中间,则合成一个空格;如果在文本内容开头,则忽略。如

    A bunch   of 此处有Tab   words you see.中文       测试。

折叠后变成

A bunch of words you see.中文 测试。

策略2: 保持原样。有几个空格,Tab 就显示几个。

2 如何处理换行符? 策略1: 忽略。如

<div>aaa
bbb</div>

忽略后变成

<div>aaabbb</div>

策略2: 换行。

3 在文本内容超出容器宽度时,如何处理? 策略1: 换行。 策略2: 不换行。

white-space 有如下可选值

  • normal(默认值)
  • nowrap
  • pre
  • pre-wrap
  • pre-line

这些值的具体说明

换行符

空格和 Tab

文本超出容器宽度

nomal

忽略

折叠

换行

nowrap

忽略

折叠

不换行

pre

换行

保持原样

不换行

pre-wrap

换行

保持原样

换行

pre-line

换行

折叠

换行

兼容性

主流浏览器,甚至包括 IE6 都支持 white-space 的所有值。

吐槽

这个属性比较让人不爽的。只看其值并不能轻松的知道其具体的设置。如果将其拆分成三个属性:

  • new-line :值为 preserve 或 collapse
  • space-and-tab: 值为 preserve 或 collapse
  • text-wrapping: 值为 wrap 或 nowrap

然后 white-space 为以上属性的一个简写

white-space: [new-line] [space-and-tab] [text-wrapping];

这样,理解 white-space 简单的多,设置起来也灵活的多。

参考


本文遵守创作共享CC BY-NC-SA 4.0协议 网络平台如需转载必须与本人联系确认。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏拂晓风起

HTML动画分类 HTML5动画 SVG库 SVG工具 Canvas动画工具

1、js配合传统css属性控制,可以使用setTimeout或者高级的requestAnimationFrame

1981
来自专栏ThoughtWorks

前端页面替换文本的方法和一些小技巧

在前端页面替换文本有几种做法,不假思索的答案通常是直接用JavaScript。但你有没有想过这完全可以用CSS实现呢? 背景 在前端页面上,有的时候我们需要...

3477
来自专栏知晓程序

浅析微信小程序的事件机制

1622
来自专栏二次元

CSS3随机背景图片切换特效

看大家扒我的幻想领域二次元限定版扒的比较累,扒了大半个小时的,抽空整理一下发出来

1233
来自专栏软件开发

CSS3与页面布局学习总结(四)——页面布局大全

一、负边距与浮动布局 1.1、负边距 所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%。当一个元素与另一个元素m...

7506
来自专栏知晓程序

开发 | 一篇文章读懂微信小程序视图层

1182
来自专栏前端说吧

PS-前端切图教程(切jpg图和切png图)

6905
来自专栏九彩拼盘的叨叨叨

学习纲要:HTML 基础概念

711
来自专栏非著名程序员

Android弹软键盘时之ListView的变化控制

前几天有个人问我,说在最底下有个输入框,弹出键盘时整个界面都一起跟着移动,上面的标题栏都移到上面看不到了,界面非常难看。其实这种问题一般存在于这样的界面布局中那...

1847
来自专栏Jacklin攻城狮

翻译_iOS视图编程指南(View Programming Guide for iOS)之介绍

在iOS中,你可以使用窗口和视图将你应用的内容呈现在屏幕上。窗口本身是不具备呈现可视化内容的功能的,但它可以用作装有应用视图的容器。视图可以规定在窗口的某一部分...

1173

扫码关注云+社区