Remove the extra space in a link text after break the word-CodePudding

I'm working on a navigation, but in large screen the navigation looks like this, but in laptop view the word is breaking. and it's ok to break the word.

but I want to remove the extra space in the text after.

In the large screen

and another image in laptop view, where i want to remove the space before the border.

ex: between the "App Service Performance" and "App Explorer" middle gap.

here is my code:

<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>

CodePudding user response：

You can use whitSpace: "nowrap" -> For every link like this:

<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>

And Also add overflow-x: scroll in your most parent header class for small scrrens it will work.

Hope, it will work. Thanks.

CodePudding user response：

Please add flex-wrap="wrap" after flex in <Box.