Select 中的 Antd 自动换行

Question

我有一个 Select 组件和一个 Option 子项，需要在给定宽度内适应所有文本。如果选项文本超过定义的宽度，则应换行。

到目前为止，我正在尝试像下面这样设置 Select 组件的样式，但没有成功：

 <Select style={{ width: 250, height: "auto", wordWrap: "break-word" }} />

下面我有一个 link 沙箱，其中包含我要实现的目标

https://codesandbox.io/s/search-with-sort-antd-4-16-13-forked-8fhnt?file=/index.js

是否可以使用 Select 组件进行文本换行？

Answer 1

您需要覆盖样式。

.ant-select-show-search.ant-select:not(.ant-select-customize-input)
  .ant-select-selector {
  height: auto;
}
.ant-select-single.ant-select-show-arrow .ant-select-selection-item {
  white-space: normal;
  word-break: break-all;
}

CodeSandbox

Answer 2

.ant-select-item-option-content {
  white-space: break-spaces;
  word-break: break-word;
}

在代码沙箱中尝试此处：enter link description here

Select 中的 Antd 自动换行

Antd word-wrap in Select

css

reactjs

antd