Search code examples
reactjsmaterial-uitextfieldword-wrap

Ellipsis effect on MUI textfield

How do i add ellipsis effect on MUI textfield? They have a multi line option for text wrap, but I want a single line, wrapping the text like you can do with <Text numberOfLines={1} ellipsizeMode='head'>long long long long text<Text>.

ref: https://mui.com/material-ui/react-text-field/

Solution

  • You can specify the ellipsis for the input. Here is a working codesandbox

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