ReactJS -将溢出的元素放入“…”中屏幕缩小时的下拉按钮

import React, { useState } from 'react';
import './DropdownButton.css'; // 引入样式表

const DropdownButton = () => {
  const [isExpanded, setExpanded] = useState(false);

  const handleButtonClick = () => {
    setExpanded(!isExpanded);
  };

  return (
    <div className="dropdown-container">
      <div className={`content ${isExpanded ? 'expanded' : ''}`}>
        {/* 溢出的内容 */}
        {/* 可以根据需要添加更多内容 */}
      </div>
      <button className="dropdown-button" onClick={handleButtonClick}>
        {/* 下拉按钮 */}
      </button>
    </div>
  );
};

export default DropdownButton;

.dropdown-container {
  position: relative;
  /* 容器样式，根据需要设置 */
}

.content {
  height: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  /* 元素样式，根据需要设置 */
}

.content.expanded {
  height: auto;
  overflow: visible;
}

.dropdown-button {
  /* 下拉按钮样式，根据需要设置 */
}