input 框的宽度设置自适应

在HTML和CSS中，要实现`input`框的宽度自适应，通常是在CSS中使用`width: auto;`或者是`:width`伪元素结合`content`属性。当你在输入内容时，宽度会动态地随文本增长而调整。下面是一个简单的例子：

<input type="text" id="dynamic-input" style="width: 100%; overflow: hidden;">

在这个例子中，`width: 100%`会让输入框占用其容器的全部宽度，`overflow: hidden;`确保当内容超过输入框原始宽度时不会显示出来。

如果想根据字符数动态调整宽度，可以借助JavaScript或者计算属性。例如，我们可以设置一个最大宽度，然后基于当前输入长度计算合适的宽度：

const input = document.getElementById('dynamic-input');
input.addEventListener('input', function() {
  const maxLength = 50; // 或者从配置或其他地方获取
  this.style.width = `${this.value.length <= maxLength ? this.value.length * 10 + 'ch' : maxLength * 10}px`;
});

这会在用户输入时更新`input`的宽度，每增加一个字符宽度就相应增加10像素。