控制换行和空白处理的CSS属性-white-spac

本文详细介绍了CSS属性white-space的五个值:normal、pre、nowrap、pre-wrap和pre-line,以及它们对换行和空白处理的不同效果。normal值会忽略空白和换行,pre保留空白并遵循原文换行,nowrap强制不换行,pre-wrap允许换行但保留空白,pre-line则在保留空白的同时依据换行进行换行。理解这些区别有助于更好地控制文本布局。
摘要由CSDN通过智能技术生成

本文说的white-space是一个控制换行和空白处理的CSS属性。我曾经被这个属性烦死,一直没记住,今天决定还是写下来好好琢磨下。

属性值

normal

默认值,正常换行,空白和换行符会被浏览器忽略。啥意思呢?

正常换行的意思是,单词间会正常换行,如果下一个单词太长,不足以在当前行剩余部分完整展示,则会在下一行显示。哪些情况算一个单词呢?

一个中文字
一个英文单词

// 这是两个单词
Tusi Blog
// 这只算一个单词
TusiBlog

连续的数字或符号也只算一个单词

// 这只算一个单词,如果超长也不会换行,会挤出横向滚动条
10000000000000000000000+2000000000000000000*200000000000000

专门建立的学习Q-q-u-n: 731771211,分享学习方法和需要注意的小细节,不停更新最新的教程和学习技巧
(从零基础开始到前端项目实战教程,学习工具,全栈开发学习路线以及规划)

空白和换行符会被浏览器忽略。就是你输入连续的空格,只会表现出一个空格的效果;如果敲了回车,也不会换行。

<!-- 代码 -->
<div>00000000                  00000000000000000></div>
<!-- 实际效果 -->
00000000 00000000000000000
</
  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值