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

Question

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

当 Breadcrumbs 组件占用其全部 space 时，其项目使用省略号收缩，就像任何具有 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 上重现该问题：

Answer 1

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

为什么？

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

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

你能做什么？

Breadcrumbs 用 display: flex 渲染 ol。为了迫使 children (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

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

How to make noWrap work with Breadcrumbs?

css

emotion

responsive-design

reactjs

material-ui