
简体中文
CSS white-space 属性用于设置如何处理元素内的空白字符 (en-US)。
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'> ];
名称 | 兼容性 | 描述 |
---|---|---|
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分支示例另见
示例
<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>