如何解决如何显示比材质用户界面中的文本字段宽度长的文本?
目前,我正在使用ReactJs / Material UI开发移动企业网站,并且我想知道如何向用户显示比限制宽度TextField
长的字符。
当然,用户可以通过触摸文本字段并移动光标来查看所有字符,但是我需要一种更有效的方法。
下面是我提出的想法。
有什么主意吗?
解决方法
我会保持简单:
-
对于长文本(内容,说明...):我将其设置为
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组件,所以请不要使用它。
实时演示
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。