# white-space

CSS white-space 属性用于设置如何处理元素内的空白字符 (en-US)。

# uni-app x 兼容性

Web Android iOS HarmonyOS
4.0 4.0 4.11 4.61

# 语法

white-space: normal | pre | nowrap | pre-wrap | pre-line | break-spaces | [ <'white-space-collapse'> || <'text-wrap'> || <'white-space-trim'> ];

# white-space 的属性值

名称 兼容性 描述
normal
连续的空白符会被合并。源码中的换行符会被当作空白符来处理。并根据填充行框盒子的需要来换行。
nowrap
和 normal 一样合并空白符,但阻止源码中的文本换行。
pre-line
连续的空白符会被合并。在遇到换行符或
元素时,或者根据填充行框盒子的需要换行。
pre
连续的空白符会被保留。仅在遇到换行符或
元素时才会换行。
pre-wrap
连续的空白符会被保留。在遇到换行符或
元素时,或者根据填充行框盒子的需要换行。
break-spaces
与 pre-wrap 的行为相同,除了:

任何保留的空白序列总是占用空间,包括行末的。
每个保留的空白字符后(包括空白字符之间)都可以被截断。
这样保留的空间占用空间而不会挂起,从而影响盒子的固有尺寸(最小内容——min-content——大小和最大内容——max-content——大小)。

# 默认值

normal

# 适用组件

# 示例

示例为hello uni-app x alpha分支,与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例另见

扫码体验(手机浏览器跳转到App直达页)

示例

<template>
  <view style="flex-grow: 1;">
    <scroll-view style="padding: 10px 0px; background-color: gray;justify-content: center;" direction="horizontal">
      <text class="text" :style="textStyle">{{multiLineText}}</text>
    </scroll-view>
    <scroll-view style="flex: 1">
      <view class="content">
        <enum-data :items="white_space" title="white-space" @change="radio_change"></enum-data>
      </view>
    </scroll-view>
  </view>
</template>

<script>
  import { ItemType } from '@/components/enum-data/enum-data-types'
  export default {
    data() {
      return {
        textStyle: "white-space: normal;",
        white_space: [
          { "value": 0, "name": "normal" },
          { "value": 1, "name": "nowrap" },
          { "value": 2, "name": "pre" },
          { "value": 3, "name": "pre-wrap" },
          { "value": 4, "name": "pre-line" },
          { "value": 5, "name": "break-spaces" }] as ItemType[],
        multiLineText: `HBuilderX,
	轻巧、
		极速,
			极客编辑器;
				uni-app x,
					终极跨平台方案;
				uts,
			大一统语言

HBuilderX,轻巧、极速,极客编辑器;uni-app x,终极跨平台方案;uts,大一统语言`
      }
    },
    methods: {
      radio_change(checked : number) {
        this.textStyle = `white-space: ${this.white_space[checked].name};`
      }
    },
  }
</script>

<style>
  .text {
    font-size: 20px;
    /* 需要设置 align-self text组件才会自适应宽度 */
    align-self: flex-start;
  }
</style>

# 参见