输入框如何自动伸缩及换行？

作者站长头像
站长
· 阅读数 23

请问各位大神怎么实现这个效果， 输入长度变长时 自动伸缩输入框，超出行宽时自动换行

输入框如何自动伸缩及换行？

回复
1个回答
avatar
test
2024-07-01

找到了一个方案，主要依靠 div的。contenteditable="true"

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自动变长输入框</title>
    <link rel="stylesheet" href="styles.css">
</head>
<style>
    .input-container {
        width: 200px;
    }
    .auto-expand {
        display: inline;
        word-break: break-all;
        word-wrap: break-word;
        border: 1px solid black;
    }
</style>
<body>
<div class="input-container">
    你好，
    <div class="auto-expand" contenteditable="true">111</div>
    请下午来开会
</div>
</body>
</html>

answer image

回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引，对解决问题有帮助
  • 遵循 Markdown 语法排版，代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容