react-select V2 - how to achieve `overflow-x: hidden` on an `isMulti` `ValueContainer`

问题

I'm trying to figure out how to get a react-select V2 component which is set to isMulti to hide the selected values once they exceed the ValueContainer's width (instead of breaking to a new line and expanding the component's height).

I tried achieving this (with no luck) by applying the following style to the valueContainer:

 valueContainer: base => ({
            ...base,
            overflowX: "hidden"
          }) 

Here is an example of the unwanted behavior (my goal is to get the 3rd value to be partially hidden or truncated on the same line as the other 2 values instead of appearing on a new line).

Any suggestions?

回答1:

Try using the css style inline-block.

valueContainer: base => ({
        ...base,
        display: "inline-block",
        overflowX: "hidden"
      }) 

If you also apply this style to the input element, it will avoid wrapping as well.

    valueContainer: base => ({
        ...base,
        display: "inline-block",
        overflowX: "hidden"
      }),
    input: base => ({
        ...base,
        display: "inline-block"
      })

And, if you prevent breaking between blocks, by adding whiteSpace: 'nowrap' to the containing control, that should keep all the elements on the same line:

      control: base => ({
        ...base,
        width: 200,
        whiteSpace: "nowrap"
      }),
      menu: base => ({ ...base, width: 200 }),
      valueContainer: base => ({
        ...base,
        overflowX: "hidden",
        display: "inline-block"
      }),
      input: base => ({
        ...base,
        display: "inline-block"
      })

来源：https://stackoverflow.com/questions/52244625/react-select-v2-how-to-achieve-overflow-x-hidden-on-an-ismulti-valuecont