flex布局文本居中，文本溢出自动换行的方法

export const ColoredItem = ({ item }) => {
  return (
    <div
      className={`w-full flex items-center space-x-1 border rounded `}
      style={{
        backgroundColor: item.color + "1a",
        borderColor: item.color,
        borderOpacity: 0.2,
        color: item.color,
      }}
    >
        <span
          className="flex-1 grow overflow-hidden"
          style={{
            wordWrap: "break-word",
          }}
        >
          {item.name}
        </span>
      <CopyOutlined />
    </div>
  );
};

如果这里的span 不加 overflow-hidden 他就会根据文字将自身撑大， 就看不到copyoutlined 这个图标了