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

Question

对于以下这两种情况，我该怎么办：它接缝不适合多词或其他将它们的措辞分开的语言，例如中文，日文....

Answer 1

在您的示例中，似乎存在切换开关的容器正在限制大小。我整理了一个简单的示例，默认情况下，切换按钮会让文本在换行之前运行到父容器的边缘。

代码：

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;