Antd word-wrap in Select

user_14079233 0
Viewed 2177

I have a Select component and a Option children that needs to fit with all its text in a given width. If the Option text goes over the defined width it should be wrapped.

So far I am trying to style the Select Component like the following but without success:

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

Below I have a link sandbox of what I am trying to achieve

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

Is text wrapping possible using a Select component?

antd reactjs css
2 Answers

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

Try here in code sandbox : enter link description here

user_31625400

You'd need to override the styles.

.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

user_100972130
Related