Reactjs 以下拉菜单作为标签输入，溢出屏幕。如何使其响应？

我正在使用React开发语义UI。 我有一个问题，下拉字段非常大，我需要将它们分成多行。但是它没有把它分成几行，而是从屏幕上溢出

const options = [
  { key: ".comwewfwfwf", text: ".comwr2u3rbirubiubiubib", value: ".com" },
  { key: ".net", text: ".netpojpj0w9jefwfbwiofbw", value: ".net" },
  { key: ".org", text: ".orgwoefifoifoioiwoifwoicnwoinwonwo", value: ".org" }
];
const App = () => (
  <Input
    label={
      <Dropdown
        className="cdd"
        direction="left"
        placeholder="Select Currency"
        search
        options={options}
      />
    }
    labelPosition="right"
    direction="right"
    placeholder="Your Deposit"
    value={1}
  />
);

const选项=[
{键：“.comwewf”，文本：“.comwr2u3rbirbiubib”，值：“.com”}，
{键：“.net”，文本：“.netpojpj0w9jefwfbwiofbw”，值：“.net”}，
{关键字：“.org”，文本：“.orgWoefoifooifWoifWoicnWoinWonWo”，值：“.org”}
];
常量应用=（）=>(
);

该上下文中的标签包含文本，该文本将显示并展开标签本身以填充宽度。即使有空格，文本也不会换行。如果您想在下拉标签中将所选文本换行到新行的地方执行某些操作，则需要添加一些自定义CSS来执行此操作

我建议设置

max width

，以确保即使是长文本也不会中断。然后你有一些选择。可以将文本保持在一行，并使用CSS为溢出的文本添加省略号，也可以将文本显示设置为添加连字符或不同的打断属性

---

这都是自定义CSS，不是语义UI React的功能，也不是语义UI样式的开箱即用功能。

如果您可以提供codepen或JSFIDLE，将非常有用。