fabric-ui 当跨度文本包含多个单词时，始终切换垂直分隔显示和自动分隔单词

Question

下面这两种情况我能做些什么： 它不适合多词或其他语言，如中文、日文....

Answer 1

在您的示例中，切换器所在的容器似乎限制了大小。我把一个 quick example 放在一起，看起来默认情况下切换会让文本 运行 在包装之前到达父容器的边缘。

代码：

const ToggleBasicExample: React.FunctionComponent = () => {
  return (
    <>
      <div style={{border: "1px solid red"}}><Toggle label="001" offText="Off separate test" /></div>
      <div style={{border: "1px solid red"}}><Toggle label="002" offText="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce nec tortor nec odio laoreet tristique quis lacinia neque. Donec mattis nibh congue mauris rutrum aliquam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nunc et purus orci. Phasellus finibus lobortis libero eget aliquam. Maecenas ut felis in leo mattis cursus a et est. Integer eget accumsan ligula. Cras at semper tellus, ac feugiat quam. In faucibus elementum orci quis dignissim. Donec quis fringilla risus. Proin interdum tempor odio, sed pulvinar eros hendrerit vulputate. Praesent rhoncus felis eget odio tincidunt laoreet. Ut quis neque sit amet neque mattis vehicula id ac nisl." /></div>
      <div style={{border: "1px solid red"}}><Toggle label="Fusce nec tortor nec odio laoreet tristique quis lacinia neque." offText="Lorem ipsum dolor sit amet, consectetur adipiscing elit." /></div>
      <div style={{border: "1px solid red", width: "50px"}}><p>50px wide</p><Toggle label="Fusce nec tortor nec odio laoreet tristique quis lacinia neque." offText="Lorem ipsum dolor sit amet, consectetur adipiscing elit." /></div>
    </>

Answer 2

已通过添加 css 样式解决此问题：word-break: keep-all;