fabric-ui Toggle always vertical separation display and auto separate words when the span text contain multi-words

Question

what can i do for these two case below: It seams not fit multi-words or other language which will separate their wording such as Chinese, Japanese....

Answer 1

In your examples, it looks like the container the toggle exists within is constraining the size. I put together a quick example and it looks like by default the toggle will let text run to the edge of the parent container before wrapping.

code:

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

have fix this problem by add a css style : word-break: keep-all;