white-space

# white-space

white-space 属性用于设置如何处理元素中的空白字符（空格、换行符、制表符）以及文本是否自动换行。

# uni-app x 兼容性

Web	Android	iOS	HarmonyOS	HarmonyOS(Vapor)
4.0	4.0	4.11	4.61	5.0

# 语法

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

示例源码如下，请查看 pre > code 标签中的内容

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

# 值限制

enum

# white-space 的属性值

名称

兼容性

描述

normal

换行符（\n）当做空白符处理，连续的多个空白字符会合并为一个空格，文本遇到边界会自动换行，行末空白字符移除。

nowrap

换行符（\n）当做空白符处理，连续的多个空白字符会合并为一个空格，文本遇到边界不会自动换行，行末空白字符移除。

pre

换行符（\n）保留并换行显示，连续的多个空白字符保留，文本遇到边界不会自动换行，行末空白字符保留。

pre-wrap

换行符（\n）保留并换行显示，连续的多个空白字符保留，文本遇到边界会自动换行，行末空白字符保留但“不占位置”。

pre-line

换行符（\n）保留并换行显示，连续的多个空白字符会合并为一个空格，文本遇到边界会自动换行，行末空白字符移除。

break-spaces

换行符（\n）保留并换行显示，连续的多个空白字符保留，文本遇到边界会自动换行，行末空白字符换行处理。

keep

不对空白字符处理，保持原始值。换行符（\n）保留并换行显示，连续的多个空白字符保留，文本遇到边界会自动换行，行末空白字符保留。

# 默认值

平台	默认值
uvue-app	keep
uvue-web	pre-line

注意：W3C 默认值为：normal

# 适用组件

text
button

# HBuilderX5.0版本调整

app平台、web平台调整 white-space 属性的实现按 W3C 标准规范，同时 app 平台新增支持 keep 属性值。

默认值调整

app-android、app-ios平台新增支持取值 keep，默认值由 normal 调整为 keep
app-harmony平台蒸汽模式（Vapor）支持取值 keep，默认值为 keep
web平台平台，默认值由 `normal' 调整为 pre-line

调整前实现规范

normal（与调整后的pre-line效果一致）
换行符（\n）保留并换行显示，连续的多个空白字符会合并为一个空格，文本遇到边界会自动换行，行末空白字符移除。
nowrap
换行符（\n）保留并换行显示，连续的多个空白字符会合并为一个空格，文本遇到边界不会自动换行，行末空白字符移除。
pre
换行符（\n）保留并换行显示，连续的多个空白字符保留，文本遇到边界不会自动换行，行末空白字符保留。
pre-wrap
换行符（\n）保留并换行显示，连续的多个空白字符保留，文本遇到边界会自动换行，行末空白字符保留。
pre-line
换行符（\n）保留并换行显示，连续的多个空白字符会合并为一个空格，文本遇到边界会自动换行，行末空白字符移除。
break-spaces
换行符（\n）保留并换行显示，连续的多个空白字符保留，文本遇到边界会自动换行，行末空白字符保留。

# 示例

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

示例

<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>

示例源码如下，请查看 pre > code 标签中的内容

<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>