如何使 noWrap 与面包屑一起使用？答案

【问题标题】：How to make noWrap work with Breadcrumbs?如何使 noWrap 与面包屑一起使用？
【发布时间】：2022-02-08 22:23:49
【问题描述】：

我正在尝试使 MUI 组件 Breadcrumbs 响应：

当Breadcrumbs 组件占用其所有空间时，它的项目使用省略号缩小，就像任何带有noWrap 属性集的Typography 组件一样。

我知道它有 itemsBeforeCollapse、itemsAfterCollapse 和 maxItems 道具，但这些道具是关于项目编号与视口大小的比较，而不是每个项目的宽度。

我尝试将noWrap 属性设置为Typography 和Link 组件（因为它扩展了Typography 道具），但省略号没有显示，Link 或Typography 组件没有收缩。

<Breadcrumbs>
  {links.map((link, i) =>
    i !== links.length - 1 ? (
      <Link
        key={i}
        underline={'hover'}
        noWrap
      >
        {link}
      </Link>
    ) : (
      <Typography noWrap key={i}>
        {link}
      </Typography>
    ),
  )}
</Breadcrumbs>

您可以在此 codeSandbox 上重现该问题：

【问题讨论】：

标签： css reactjs responsive-design material-ui emotion

【解决方案1】：

如果我理解正确，问题是noWrap 样式没有影响正确的元素。

为什么？

noWrap 影响其宽度限制为显式（例如width: 100px）或隐式（受父级宽度）限制的元素。

在您的情况下，Link 和 Typography 的宽度不受限制。

你能做什么？

Breadcrumbs 用display: flex 渲染ol。为了迫使孩子们（li）站队（并在你的情况下采取三分之一），你应该给它flex: 1。至此，您可以为li 赋予省略号样式。

最后一部分，如何赋予li这些样式？ css 部分描述了一些方法。

我会采用styled 方法，这就是它的外观

import * as React from "react";
import Typography from "@mui/material/Typography";
import Breadcrumbs from "@mui/material/Breadcrumbs";
import Link from "@mui/material/Link";
import { styled } from "@mui/material/styles";

const StyledBreadcrumbs = styled(Breadcrumbs)`
  .MuiBreadcrumbs-li {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
  }
`;

export default function BasicBreadcrumbs() {
  const links = [
    "this is a waaaaaaaaaaaaay too long link",
    "and another link that can be long too",
    "this is the last link and guess what? It's waaaaaaaaaaaaaaaaaaayyy more longer"
  ];
  return (
    <StyledBreadcrumbs>
      {links.map((link, i) =>
        i !== links.length - 1 ? (
          <Link key={i} underline={"hover"}>
            {link}
          </Link>
        ) : (
          <Typography key={i}>
            {link}
          </Typography>
        )
      )}
    </StyledBreadcrumbs>
  );
}

https://codesandbox.io/s/basicbreadcrumbs-material-demo-forked-y1bbo?file=/demo.js

【讨论】：