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

hiz5n14c 于 2022-12-15 发布在 React

关注(0)|答案(1)|浏览(125)

bounty将在4天后过期。回答此问题可获得+50声望奖励。Mac Pic Chu希望引起更多人关注此问题。

我正在尝试为移动的/平板设备实现多行面包屑链接。用户将在多个文件夹中导航，如果超过面包屑链接容器配置的最大行数，我将从头开始丢弃链接（尝试显示当前路径的最大路径）。找不到用于此操作的css方法。请在下面找到max line = 2的示例

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

超过path 5（转到第3行，应将链接更新为

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

如果用户向后导航，应该更新没有椭圆。我尝试了以下方法，没有工作的预期-

css的方式钳到最大线//它没有工作，因为我们需要找到多少链接修剪
1.使用white-space: no wrap和text-overflow: ellipse，我不能使用它，因为它不允许多行
1.尝试使用表达式-Width(in pixel) * Font Constant / font Size (in pixels)查找适合单行div的最大字符数
动态计算宽度和字体大小。但不知道如何获取元素的字体常量。如有帮助，不胜感激。

css

来源：https://stackoverflow.com/questions/74751601/what-is-best-way-to-implement-multi-line-bread-crumb-links-in-react

1条答案

按热度按时间

z9ju0rcb1#

从“React”导入React;从“react-router-domain”导入{链接，使用位置};

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;

赞(0）回复(0）举报 2022-12-15

我来回答

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

1条答案

相关问题

热门标签

最新问答