Ellipsis effect on MUI textfield

user_2857508 0
Viewed 184

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/

material-ui reactjs textfield word-wrap
1 Answers

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"
      />
user_53764040
Related