React标签页文本未显示省略号，仅被隐藏问题求助

问题出在你把文本溢出的样式加在了外层容器上，而实际文本在内层div里，text-ellipsis需要直接作用在包含文本的元素上才能生效。

修改后的代码如下：

const Tabs: React.FC = () => {
  const [tabs, setTabs] = useState(["Tab 1"]);

  const addNewTab = () => {
    setTabs([...tabs, `Tab ${tabs.length + 1}`]);
  };

  return (
    // outer div ensures that the tabs take up the remaining space in whatever view we use
    <div className="flex-1 overflow-hidden">
      <div className="flex overflow-hidden items-center h-8">
        {tabs.map((tab, index) => (
          //  outer div so that when you hover over tab, it does not colour all the way to tab border
          <div
            key={index}
            className="flex basis-40 justify-center items-center h-8 border-r px-1 border-gray-300"
          >
            <div
              className="h-7 basis-36 flex items-center text-sm hover:bg-slate-300 rounded whitespace-nowrap overflow-hidden text-ellipsis"
              title={tab}
            >
              {tab}
            </div>
          </div>
        ))}
        {/* add styling to button to ensure */}
        <button
          className="ml-2 hover:bg-slate-300 rounded flex items-center justify-center h-7 w-7 flex-shrink-0"
          onClick={addNewTab}
        >
          <img src={AddIcon} alt="Add icon" className="h-5 w-5" />
        </button>
      </div>
    </div>
  );
};

export default Tabs;

修改说明： #

• 移除外层标签容器的whitespace-nowrap overflow-hidden text-ellipsis样式
• 将这三个样式转移到直接承载标签文本的内层div上
• 内层div通过basis-36设置基础宽度，当外层容器因标签数量增加而收缩时，内层div宽度被限制，文本超出后会自动显示省略号

内容的提问来源于stack exchange，提问作者Ruthvik Konduru