React Bootstrap自定义组件溢出列

Question

我有自定义切换下拉菜单：

import React from 'react';
import 'react-datepicker/dist/react-datepicker.css';

const DateRange = props => (
  <div className="dropdown artesianDropdownContanier">
    <div className="btn-group width100">
      <button type="button" className="btn dropdown-width">{props.selected}</button>
      <button type="button" className="btn dropdown-toggle dropdown-toggle-split artesianDropdownToggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <span className="sr-only">Toggle Dropdown</span>
      </button>
      <div className="dropdown-menu artesianDropdown">
        {props.dropDownValues.map(val => (
          <span
            key={val}
            value={val}
            className={`dropdown-item ${props.dropdownItemClass}`}
            onClick={() => props.onClick(val)}
            aria-hidden="true"
          >
            {val}
          </span>
        ))
        }
      </div>
    </div>
  </div>
);

export default DateRange;

页面上看起来像这样：

当我去调整网页大小时，组件的箭头部分溢出其引导容器：

如果我将箭头上的显示设置为＆＃34; none＆＃34;您可以看到带有文本的下拉按钮本身正在完美地调整大小。它似乎是下拉箭头部分给我带来麻烦。

关于如何将这个家伙牢牢地留在父容器中的任何想法？ 谢谢！

Answer 1

尝试将此样式添加到包含{props.selected}的组件：

<button
    type="button" 
    className="btn dropdown-width"
    style={{
       textOverflow: 'ellipsis',
       overflow: 'hidden'
    }}
>
{props.selected}
</button>

这应该将{props.selected}文本的结尾替换为3个点，然后将该位置放到下拉按钮中。 （可能需要进行一些调整，具体取决于您的dropdown-width类）