MUI 文本字段上的省略号效果

Question

如何在 MUI 文本字段上添加省略号效果？他们有一个多行文本换行选项，但我想要单行，像使用<Text numberOfLines={1} ellipsizeMode='head'>long long long long text<Text>.

参考： https: //mui.com/material-ui/react-text-field/

Answer 1

您可以指定输入的省略号。这是一个工作代码沙箱

    <TextField
        id="outlined-basic"
        label="Outlined"
        variant="outlined"
        sx={{
          "& .MuiInputBase-input": {
            overflow: "hidden",
            textOverflow: "ellipsis"
          }
        }}
        value="ver long text with ellipsis"
      />