VuePressVuePress
首页
  • 基础
  • UI
  • JavaScript
  • CSS
  • postcss
  • Vue3
  • Vue的设计与实现
  • 前端常用插件
  • PHP
  • Laravel
  • Linux
  • 线性代数
Category
AI
jiyun
Timeline
首页
  • 基础
  • UI
  • JavaScript
  • CSS
  • postcss
  • Vue3
  • Vue的设计与实现
  • 前端常用插件
  • PHP
  • Laravel
  • Linux
  • 线性代数
Category
AI
jiyun
Timeline
  • 基础知识

    • 单位和函数
    • line-height
    • backdrop-filter
  • 文本

    • white-space
  • 盒子模型

    • box-shadow
    • shadow-box1
    • outline
    • 层叠上下文
  • 布局

    • CSS 网格完整指南
    • Positions
    • 视口相关单位
  • 动画

    • animation
  • demo

    • transform1
    • animation border
  • tailwindcss

    • sr-only
    • font

CSS 的 white-space 属性用于控制元素内如何处理空白字符和换行。

该属性有以下几种常用的值:

  1. normal:默认值。连续的空白字符会被合并,文本会换行。
  2. nowrap:文本不会换行,所有的文本会在一行显示,除非使用 <br> 标签手动换行。
  3. pre:文本会保留空白字符和换行符,就像在 <pre> 标签中一样。
  4. pre-wrap:保留空白字符和换行符,同时允许长的文本在必要时换行。
  5. pre-line:合并连续的空白字符,但保留换行符。

用法总结

  • white-space: normal; 用于常规文本显示。
  • white-space: nowrap; 用于不希望文本换行的场景。
  • white-space: pre; 用于显示格式化文本,保留空白字符和换行符。
  • white-space: pre-wrap; 用于需要保留空白字符和换行符,但也允许文本在必要时换行。
  • white-space: pre-line; 用于合并空白字符但保留换行符的场景。

这个属性在处理文本格式时非常有用,特别是当你希望保留文本中的空白字符和换行符时。

Last Updated:
Contributors: BaronYan