小编Nav*_*een的帖子

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

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

current path = 
path1 / path2 
/ path3 / path4
/path5
Run Code Online (Sandbox Code Playgroud)

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

updated path = 
.../ path2 
/ path3 / path4
Run Code Online (Sandbox Code Playgroud)

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

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

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

html javascript css reactjs

9
推荐指数
1
解决办法
544
查看次数

标签 统计

css ×1

html ×1

javascript ×1

reactjs ×1