React-Select,Multi Select和Text Overflow

Question

我正在使用具有多选的React-Select组件.我面临的一个问题是,如果用户选择3或4个选项,则UI看起来非常糟糕,因为文本开始溢出并导致组件水平和垂直增长.

我希望有一个行为,其中组件的大小保持不变,如果用户选择更多选项,那么它只显示"..."(省略号)而不是尝试显示新选择的选项.

我想要的行为更内联这个组件

http://instructure-react.github.io/react-select-box/

了解它如何处理多选.

我现在不想换掉组件,因为我们已经使用React-Select进行了大量测试.

你能否给我一些如何在不删除react-select的情况下实现这一目标的指导方针.

Answer 1

我已经设法实现省略号效果并将显示留在一行，这是一个工作示例https://codesandbox.io/s/v638kx67w7 希望这会有所 帮助

Answer 2

这是为给定的反应选择元素生成的 Html

\n\n

\r\n

\r\n

. react-select-box-container {\r\n  position: relative;\r\n  width: 240px;\r\n  display: inline-block;\r\n  background-color: #fff;\r\n  border-radius: 4px;\r\n  text-align: left;\r\n  box-shadow: 0 0 2px rgba(0, 0, 0, .3);\r\n}\r\n\r\n.react-select-box {\r\n  padding: 15px 0;\r\n  display: inline-block;\r\n  cursor: pointer;\r\n  border: none;\r\n  width: 100%;\r\n  text-align: left;\r\n  background-color: transparent;\r\n}\r\n\r\n.react-select-box:focus {\r\n  outline: 0;\r\n  box-shadow: 0 0 4px #0493D1;\r\n}\r\n\r\n.react-select-box:before {\r\n  content: \' \';\r\n  z-index: 1;\r\n  position: absolute;\r\n  height: 20px;\r\n  top: 15px;\r\n  right: 34px;\r\n  border-left: 1px solid #CBD2D7;\r\n}\r\n\r\n.react-select-box:after {\r\n  content: \' \';\r\n  position: absolute;\r\n  z-index: 1;\r\n  top: 23px;\r\n  right: 13px;\r\n  border-top: 6px solid #7B8E9B;\r\n  border-left: 5px solid transparent;\r\n  border-right: 5px solid transparent;\r\n}\r\n\r\n.react-select-box-label,\r\n.react-select-box-option {\r\n  line-height: 16px;\r\n  font-size: 12px;\r\n  font-weight: bold;\r\n  color: #7B8E9B;\r\n}\r\n\r\n.react-select-box-label {\r\n  padding: 0 40px 0 20px;\r\n  white-space: nowrap;\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n  color: #0493D1;\r\n}\r\n\r\n.react-select-box-empty .react-select-box-label {\r\n  color: #7B8E9B;\r\n}\r\n\r\n.react-select-box-click-outside-layer {\r\n  position: fixed;\r\n  top: 0;\r\n  left: 0;\r\n  right: 0;\r\n  bottom: 0;\r\n  z-index: 2;\r\n}\r\n\r\n.react-select-box-clear {\r\n  position: absolute;\r\n  top: 15px;\r\n  right: 0;\r\n  width: 35px;\r\n  height: 20px;\r\n  background-color: #fff;\r\n  text-indent: -9999em;\r\n  z-index: 3;\r\n  border: none;\r\n}\r\n\r\n.react-select-box-clear:before {\r\n  content: \'\xc3\x83\xe2\x80\x94\';\r\n  position: absolute;\r\n  top: 2px;\r\n  left: 10px;\r\n  z-index: 1;\r\n  background-color: #7B8E9B;\r\n  border-radius: 100%;\r\n  font-size: 13px;\r\n  color: #fff;\r\n  line-height: 1;\r\n  width: 15px;\r\n  height: 15px;\r\n  text-indent: 0;\r\n  text-align: center;\r\n}\r\n\r\n.react-select-box-clear:hover,\r\n.react-select-box-clear:focus {\r\n  outline: 0;\r\n}\r\n\r\n.react-select-box-clear:hover:before,\r\n.react-select-box-clear:focus:before {\r\n  background-color: #0493D1;\r\n}\r\n\r\n.react-select-box-hidden {\r\n  display: none\r\n}\r\n\r\n.react-select-box-options {\r\n  margin: 2px 0 0;\r\n  position: absolute;\r\n  padding: 10px 0;\r\n  width: 240px;\r\n  top: 100%;\r\n  left: 0;\r\n  z-index: 4;\r\n  background-color: #fff;\r\n  border-radius: 4px;\r\n  box-shadow: 0 0 2px rgba(0, 0, 0, .3);\r\n}\r\n\r\n.react-select-box-options-list {\r\n  list-style: none outside;\r\n  margin: 0;\r\n  padding: 0;\r\n}\r\n\r\n.react-select-box-option {\r\n  padding: 10px 20px;\r\n  margin: 0;\r\n  cursor: pointer;\r\n  display: block;\r\n  line-height: 1.2;\r\n  text-decoration: none;\r\n}\r\n\r\n.react-select-box-option:hover {\r\n  color: #0493D1;\r\n  background-color: #f4f4f4;\r\n}\r\n\r\n.react-select-box-option-selected {\r\n  color: #CBD2D7;\r\n}\r\n\r\n.react-select-box-multi .react-select-box-option {\r\n  padding-left: 42px;\r\n  position: relative;\r\n}\r\n\r\n.react-select-box-multi .react-select-box-option:before {\r\n  content: \' \';\r\n  position: absolute;\r\n  line-height: 1;\r\n  text-align: center;\r\n  left: 20px;\r\n  top: 9px;\r\n  border-radius: 3px;\r\n  height: 12px;\r\n  width: 12px;\r\n  margin-right: 10px;\r\n  border: 1px solid #7B8E9B;\r\n  background: #f9f9f9;\r\n  vertical-align: middle;\r\n}\r\n\r\n.react-select-box-multi .react-select-box-option-selected:before {\r\n  content: \'\xc3\xa2\xc5\x93\xe2\x80\x9c\';\r\n}\r\n\r\n.react-select-box-multi .react-select-box-option-selected {\r\n  color: #1F3344;\r\n}\r\n\r\n.react-select-box-option:focus,\r\n.react-select-box-option-focused {\r\n  color: #0493D1;\r\n  outline: 0;\r\n  background-color: #DDE2E5;\r\n}\r\n\r\n.react-select-box-close {\r\n  color: #0493D1;\r\n  text-transform: uppercase;\r\n  background-color: transparent;\r\n  border: none;\r\n  padding: 5px 0;\r\n  display: block;\r\n  text-align: center;\r\n  width: 100%;\r\n  font-weight: bold;\r\n  cursor: pointer;\r\n  outline: none;\r\n}\r\n\r\n.react-select-box-close:hover,\r\n.react-select-box-close:focus {\r\n  text-decoration: underline;\r\n}\r\n\r\n.react-select-box-empty .react-select-box-close {\r\n  color: #CBD2D7;\r\n}\r\n\r\n.react-select-box-native {\r\n  position: absolute;\r\n  left: -99999em;\r\n}

\r\n

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>\r\n<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>\r\n<div class="react-select-box-container react-select-box-multi react-select-box-empty">\r\n  <button id="react-select-box-2" class="react-select-box" tabindex="0" aria-hidden="true">\r\n        <div class="react-select-box-label">\r\n          Favorite Colors\r\n        </div></button>\r\n\r\n  <div class="react-select-box-options react-select-box-hidden" aria-hidden="true" tabindex="0">\r\n    <div class="react-select-box-off-screen">\r\n      <a id="react-select-box-2-0" href="#" class="react-select-box-option" tabindex="-1">Red</a>\r\n      <a id="react-select-box-2-1" href="#" class="react-select-box-option" tabindex="-1">Green</a>\r\n      <a id="react-select-box-2-2" href="#" class="react-select-box-option" tabindex="-1">Blue</a>\r\n    </div>\r\n    <button class="react-select-box-close">Close</button>\r\n  </div>\r\n\r\n  <div class="react-select-box-native">\r\n    <label for="react-select-box-2-native-select">Favorite Colors</label>\r\n    <select id="react-select-box-2-native-select" multiple="multiple">\r\n            <option value="red">\r\n              Red\r\n            </option>\r\n    \r\n            <option value="green">\r\n              Green\r\n            </option>\r\n    \r\n            <option value="blue">\r\n              Blue\r\n            </option>\r\n          </select>\r\n  </div>\r\n</div>

\r\n

\r\n

\r\n

\n