输入带Dropdown作为标签，溢出屏幕。如何使其响应？

Question

我正在使用React处理Semantic 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}
  />
);

Answer 1

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

我建议设置一个max-width，以确保即使长文本也不会爆发。然后你有一些选择。将文本保留在一行上并使用CSS为省略文本添加省略号，或者可以设置文本显示以添加连字符或不同的中断属性。

这是所有自定义CSS，而不是语义UI反应的功能或语义UI样式如何开箱即用。