如何显示比材质用户界面中的文本字段宽度长的文本？

Question

目前，我正在使用ReactJs / Material UI开发移动企业网站，并且我想知道如何向用户显示比限制宽度TextField长的字符。

当然，用户可以通过触摸文本字段并移动光标来查看所有字符，但是我需要一种更有效的方法。

下面是我提出的想法。

1. 动画效果？ （当未触摸TextField时，来回移动以使整个文本可见的效果）
2. 当用户触摸文本字段时显示multiline文本字段。 （动态multiline，整个文本长度）

有什么主意吗？

Answer 1

我会保持简单：

• 对于长文本（内容，说明...）：我将其设置为multiline

• 对于短文本（电子邮件，密码...），我将在移动设备上设置fullWidth。

没有必要考虑太多。查看您所知道的最受欢迎网站上的表单，您是否看到除fullWidth或multiline以外的其他内容？

但是，如果将TextField设置为multiline，则可以通过在CSS中设置resize: both使其在没有足够空间显示长文本时自动调整大小。默认值为none（禁用）。

const useStyles = makeStyles({
  textarea: {
    resize: "both"
  }
});

<TextField
  label="MUI Text Area"
  multiline
  inputProps={{ className: classes.textarea }}
/>

您还可以使用TextareaAutosize，但是它很烂，看起来像是开箱即用的MUI组件，所以请不要使用它。

实时演示