Element ui el-select options word wrap

Question

I am using element ui's el-select tag. And my options inner text is too large. I want to wrap it.

Here is a js fiddle.

And here an existing example.

But I dont want to ellipsis the overflowing words. I want to wrap overflowing words to second line. Not only selects selected value. All options must wrap to second line if overflows. And I want to do it with pure css or with vue js methods. Is there any way for wrapping the words?

Answer 1

Here's the CSS I used to accomplish this:

.el-select-dropdown__item {
  width: 350px;
  white-space: normal;
  overflow: unset;
  height: auto;
  line-height: normal;
  padding-top: 10;
  padding-bottom: 10;
}