MUI ListItemText 主要文本溢出 ListItem 的辅助操作

Question

我正在使用 MUI (v5) List。

在我的例子中这是一个简单的列表，每个项目的左侧都有一些文本，右侧有一个值。

问题是，当列表水平变小（即用户开始缩小窗口大小）时，“左侧”文本（

<ListItemText primary={...}/>

）开始“溢出”或覆盖右侧文本，如下所示：

为了演示它，我使用了 MUI 文档中的代码：

import * as React from "react";
import List from "@mui/material/List";
import ListItem from "@mui/material/ListItem";
import ListItemText from "@mui/material/ListItemText";

export default function GutterlessList() {
  return (
    <List sx={{ width: "100%", bgcolor: "background.paper" }}>
      {[1, 2, 3].map((value) => (
        <ListItem key={value} disableGutters secondaryAction={"some text"}>
          <ListItemText
            primary={`Loooooooooooong looooooooooooooooooooong text ${value}`}
          />
        </ListItem>
      ))}
    </List>
  );
}

这是代码沙箱：链接。

在这个例子中，左侧文本的自动换行速度非常快，所以它并没有那么糟糕，但就我而言，需要一段时间“缩小窗口大小”来分割左侧文本。

有没有办法让它工作：当左侧的文本“碰撞”/“溢出”/“覆盖”右侧的文本时，自动换行（甚至断词）会立即生效？