how do i display text which is longer than the textfield width in the material ui?

I’d keep it simple:

  • For long text (content, description…): I’ll just set it to multiline

  • For short text (email, password…) I’ll set fullWidth on mobile.

There is no need to be overthinking. Look at the forms from the most popular websites you know, do you see anything other than fullWidth or multiline?

But if you set the TextField to multiline you can make it auto resize when there is not enough space to display the long text by setting resize: both in css. The default is none (disabled).

const useStyles = makeStyles({
  textarea: {
    resize: "both"
  label="MUI Text Area"
  inputProps={{ className: classes.textarea }}

You can also use TextareaAutosize but it sucks and looks nothing like a MUI component out-of-the-box, so don’t use it.

Live Demo

Edit 64592081/how-do-i-show-the-user-text-longer-than-the-textfield-width-in-the-material-ui

CLICK HERE to find out more related problems solutions.

Leave a Comment

Your email address will not be published.

Scroll to Top