css 在断开单词后删除链接文本中的多余空格

f45qwnt8 于 2022-12-24 发布在其他

关注(0)|答案(2)|浏览(156)

我在一个导航工作，但在大屏幕上的导航看起来像这样，但在笔记本电脑的看法，这个词是打破。这是确定打破这个词。
但我想去掉后面的多余空格。
在大屏幕上

和另一个图像在笔记本电脑的看法，在那里我想删除的空白之前的边界。

例如：在"应用程序服务性能"和"应用程序资源管理器"中间差距之间。
下面是我代码：

<Box
    display="flex"
    justifySelf="start"
    flex="1 1 0"
    alignItems="center"
    sx={{
        flexDirection: "row",
        width: "100%",
        alignItems: "center",
    }}
>
    {pages &&
        pages.map((page: Page, index: number) => (
            <Fragment key={page.id}>
                {index !== 0 && (
                    <Divider
                        sx={{ marginX: 1, paddingY: "15px" }}
                        orientation="vertical"
                        variant="middle"
                        flexItem
                    />
                )}
                <Typography
                    component={Link}
                    to={`/${siteId}/${page.id}`}
                    key={page.id}
                    sx={{
                        color:
                            page.id === activePage?.id
                                ? theme.palette.common.white
                                : theme.palette.grey["200"],

                        textDecoration: "none",
                    }}
                >
                    {page.name}
                </Typography>
            </Fragment>
        ))}
</Box>

css

来源：https://stackoverflow.com/questions/74884359/remove-the-extra-space-in-a-link-text-after-break-the-word

2条答案

按热度按时间

s4chpxco1#

您可以使用whitSpace：“nowrap”-〉对于每个这样的链接：

<Box
  display="flex"
  justifySelf="start"
  flex="1 1 0"
  alignItems="center"
  sx={{
    flexDirection: "row",
    width: "100%",
    alignItems: "center"
  }}
>
  {pages &&
    pages.map((page, index) => (
      <Fragment key={page.id}>
        {index !== 0 && (
          <Divider
            sx={{ marginX: 1, paddingY: "15px" }}
            orientation="vertical"
            variant="middle"
            flexItem
          />
        )}
        <Typography
          component={Link}
          href={`/`}
          key={page.id}
          sx={{
            color: "#fff",
            textDecoration: "none",
            whiteSpace: "nowrap"
          }}
        >
          {page.name}
        </Typography>
      </Fragment>
    ))}
</Box>

并添加溢出-x：在你的最大父类头类中滚动来寻找小的scrren，它会起作用。
希望能成功谢谢。

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

6yjfywim2#

请在〈Box中的flex后添加flex-wrap=“wrap”。

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