react-select V2-如何在isMulti`ValueContainer上实现`overflow-x:hidden` [英] react-select V2 - how to achieve `overflow-x: hidden` on an `isMulti` `ValueContainer`

问题描述

我正在尝试弄清楚如何获取设置的反应选择V2 组件更改为 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).

我尝试通过将以下样式应用于 valueContainer 来实现这一目标(没有运气):

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).

有什么建议吗?

推荐答案

尝试使用CSS样式

Try using the css style inline-block.

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

如果您也将此样式应用于 input 元素，则也将避免换行.

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"
      })

并且，如果要防止在块之间中断，可以通过将 whiteSpace:'nowrap'添加到包含的 control 中，这应将所有元素保持在同一行:

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"
      })

这篇关于react-select V2-如何在isMulti`ValueContainer上实现`overflow-x:hidden`的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！