不要让 flex 包裹切换的标签文本答案

【问题标题】：Don't let flex to wrap label text of toggle不要让 flex 包裹切换的标签文本
【发布时间】：2021-11-17 02:01:52
【问题描述】：

我有以下代码（带有"@fluentui/react": "^8.33.0",）

import React from 'react';
import { Toggle } from '@fluentui/react/lib/Toggle';

class TestIt extends React.Component {
  render() {
    return (
      <div style={{ display: 'flex', flexWrap: 'wrap' }}>
        <Toggle onText="Width Limit Auto" offText="Width Limit Manual"/>
      </div>
    )

  }
}
export default TestIt;

标签文本被换行的地方有以下结果。如果我删除display: 'flex', flexWrap: 'wrap'，标签文本不会被换行。

我不想换行标签文本；我不明白为什么display: 'flex', flexWrap: 'wrap'（出于某种原因/其他代码，我需要保留它）对此有影响。

比如codepen没有问题：https://codepen.io/SoftTimur/pen/JjJaRvv。

有人可以帮忙吗？

【问题讨论】：

标签： css reactjs flexbox fluent-ui fluentui-react

【解决方案1】：

我认为主要问题是width 的parent element。首先，您对Toggle Component 有不必要的包装，因为它仅涵盖flex 中的一个元素：

这里有几个Codepen examples。

注意：

Codepen 具有动态 width，这就是不存在文本换行的原因。但是当您有溢出或固定宽度时它会显示出来。在您的本地示例中为 body 和 html 或父元素添加一些 CSS：

body, html {
  width: 100%;
  height: 100%;
}

【讨论】：