css中的white-space属性
css中的white-space用来处理布局过程中元素内的空白符。
white-sapce:
normol: 默认值,空白会被浏览器忽略。
<html> <head> <title>WhiteSpace</title> <style type = "text/css"> span { white-space: normal; background: silver; } </style> </head> <body> <span> Some text。 Some text。 Some text。 </span> </body> </html>
运行结果:
元素标签<span>两端的空白符被忽略,但字符之间的空白保留。
pre: 元素之间的空白符不被忽略。类似HTML标签中的<pre>
<html> <head> <title>WhiteSpace</title> <style type = "text/css"> span { white-space: normal; background: silver; } </style> </head> <body> <span> Some text。 Some text。 Some text。 </span> </body> </html>
运行结果(火狐):
可以看到标签元素<span>之间的空白符被保留了。
nowrap: 文本不会换行,文本会在一行之间继续,直到遇到<br />标签
<html> <head> <title>WhiteSpace</title> <style type = "text/css"> span { white-space: nowrap; background: silver; } div { width: 200px; background: gold; padding: 10px; } </style> </head> <body> <div> <span> Some text。 Some text。 Some text。 Some text。 Some text。 Some text。 Some text。 Some text。 </span> </div> </body> </html>
运行结果:
元素标签<span>之间的空格以及每行换行符被忽略。文本但是文本不会自动换行,一直溢出了div框。
<html> <head> <title>WhiteSpace</title> <style type = "text/css"> span { white-space: pre-wrap; background: silver; } </style> </head> <body> <span> Some text。 Some text。 Some text。 </span> </body> </html>
运行结果(火狐):
元素标签<span>之间的空白被保留,换行符也被保留。
pre-line: 合并空白符序,但是保留换行符。
<html> <head> <title>WhiteSpace</title> <style type = "text/css"> span { white-space: pre-line; background: silver; } </style> </head> <body> <span> Some text。 Some text。 Some text。 </span> </body> </html>
运行结果:
元素标签<span>之间的空白符被忽略,但是换行符被保留。
总之,white-space控制的就是表亲两端的空白符以及换行符的显示。
标签:
white-space css
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
· 现代计算机视觉入门之:什么是图片特征编码
· .NET 9 new features-C#13新的锁类型和语义
· 手把手教你在本地部署DeepSeek R1,搭建web-ui ,建议收藏!
· Spring AI + Ollama 实现 deepseek-r1 的API服务和调用
· 《HelloGitHub》第 106 期
· 数据库服务器 SQL Server 版本升级公告
· C#/.NET/.NET Core技术前沿周刊 | 第 23 期(2025年1.20-1.26)