javascript - 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;

在页面上看起来像这样:

当我去调整网页大小时，组件的箭头部分溢出了它的 Bootstrap 容器:

如果我将箭头上的显示设置为“无”，您可以看到带有文本的下拉按钮本身正在完美调整大小。似乎是下拉箭头部分给我带来了麻烦。

关于如何将这个人牢牢地留在他的父容器中的任何想法？ 谢谢!

Answer 1

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

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

这应该用 3 个点替换 {props.selected} 文本的末尾，并将该位置放在下拉按钮上。 (根据您的 dropdown-width 类别，可能需要进行一些调整)