在反应中实现多行面包屑链接的最佳方法是什么？

Question

我正在尝试为移动/平板电脑设备实现多行面包屑链接。用户将浏览多个文件夹，如果它超出了面包屑链接容器配置的最大行数，我将从头开始删除链接（尝试显示当前路径的最大路径）。找不到为此的 css 方法。请在下面找到一个示例max line = 2

current path = 
path1 / path2 
/ path3 / path4
/path5

超过路径5（转到第3行应该将链接更新为

updated path = 
.../ path2 
/ path3 / path4

如果用户向后导航，则应更新而不带椭圆。我尝试了以下方法，但没有达到预期效果 -

1. css 方式来限制最大行数 // 它不起作用，因为我们需要找到要修剪的链接数
2. 使用white-space: no wrap and text-overflow: ellipse，我无法使用它，因为它不允许多行
3. 尝试使用表达式找到单行 div 中适合的最大字符数 -Width(in pixel) * Font Constant / font Size (in pixels)

动态计算出宽度和字体大小。但无法弄清楚如何获取元素的字体常量。任何帮助，非常感谢。

Answer 1

从“反应”导入反应；从'react-router-dom'导入{链接，useLocation}；

const Breadcrumb = ({ handleDrawerOpen, open }) => {
   const { pathname } = useLocation();

   const pathName = (paths, index) => {
      return paths.filter((path, pathIndex) => pathIndex !== 0 && pathIndex <= index).join('/');
   };
   
   const func = () => {
      const paths = pathname.split('/');
      return paths.map(
         (path, index) =>
            index !== 0 && (
               <Link
                  style={{
                     textDecoration: 'none',
                     color: index === paths.length - 1 ? '#49C5B6' : 'white',
                  }}
                  to={`/${pathName(paths, index)}`}>{`${
                  path?.charAt(0)?.toUpperCase() + path.slice(1).toLowerCase()
               } ${index !== paths.length - 1 ? '>' : ''} `}</Link>
            )
      );
   };
   return (
      <Box>
         {!open && (
            <IconButton onClick={handleDrawerOpen}>
               <MenuIcon />
            </IconButton>
         )}

         <Profile />
      </Box>
   );
};

export default Breadcrumb;