Question

我正在尝试在我的一个项目中使用react-select。 自动换行需要“滚动” 。但是，如果选项的长度超过了菜单的宽度，并且如果我向右滚动，则悬停颜色将不会填满整个宽度。

以下为参考代码。取自https://codesandbox.io/s/modest-curie-etoj3，进行了一些修改。

import React from "react";
import ReactDOM from "react-dom";
import Select from "react-select";

import "./styles.css";

function App() {
  const customStyles = {
    control: (base, state) => ({
      ...base,
      width: 300,
      background: "#023950",
      // match with the menu
      borderRadius: state.isFocused ? "3px 3px 0 0" : 3,
      // Overwrittes the different states of border
      borderColor: state.isFocused ? "yellow" : "green",
      // Removes weird border around container
      boxShadow: state.isFocused ? null : null,
      "&:hover": {
        // Overwrittes the different states of border
        borderColor: state.isFocused ? "red" : "blue"
      }
    }),
    menu: base => ({
      ...base,
      width: 300,
      // override border radius to match the box
      borderRadius: 0,
      // beautify the word cut by adding a dash see https://caniuse.com/#search=hyphens for the compatibility
      hyphens: "auto",
      // kill the gap
      marginTop: 0,
      textAlign: "left",
      // prevent menu to scroll y
      wordWrap: "normal"
    }),
    menuList: base => ({
      ...base,
      // kill the white space on first and last option
      padding: 0
    })
  };

  const options = [
    {
      label: "option 1 akjbalskej",
      value: 1
    },
    {
      label: "option 2 akjbalskej",
      value: 2
    },
    {
      label: "option 3 akjbalskej",
      value: 3
    },
    {
      label: "option 4 akjbalskej",
      value: 4
    },
    {
      label: "option 5 akjbalskej",
      value: 5
    },
    {
      label:
        "supercalifragilisticexpialidocioussupercalifragilisticexpialidocioussupercalifragilisticexpialidocious",
      value: 6
    }
  ];

  return (
    <div className="App">
      <Select styles={customStyles} options={options} />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

我对反应和前端开发还很陌生。有人可以帮我吗？预先感谢。

Answer 1

您应该使用文本溢出，空格和溢出而不是自动换行：将menu对象更改为此：

menu: base => ({
  ...
  // wordWrap: "normal",
  whiteSpace: "nowrap",
  overflow: "hidden",
  textOverflow: "ellipsis"
}),

Answer 2

此问题已由其他用户在following post中引起。

将wordWrap: 'normal'更改为wordWrap: 'break-word'，例如本示例https://codesandbox.io/s/jj3r81l3。

全套道具：

const customStyles = {
    control: (base, state) => ({
      ...base,
      background: "#023950",
      // match with the menu
      borderRadius: state.isFocused ? "3px 3px 0 0" : 3,
      // Overwrittes the different states of border
      borderColor: state.isFocused ? "yellow" : "green",
      // Removes weird border around container
      boxShadow: state.isFocused ? null : null,
      "&:hover": {
        // Overwrittes the different states of border
        borderColor: state.isFocused ? "red" : "blue"
      }
    }),
    menu: base => ({
      ...base,
      // override border radius to match the box
      borderRadius: 0,
      // beautify the word cut by adding a dash see https://caniuse.com/#search=hyphens for the compatibility
      hyphens: "auto",
      // kill the gap
      marginTop: 0,
      textAlign: "left",
      // prevent menu to scroll y
      wordWrap: "break-word"
    }),
    menuList: base => ({
      ...base,
      // kill the white space on first and last option
      padding: 0
    })
  };

反应选择：背景颜色未在wordWrap：“ scroll”上填充整个宽度

2 个答案: