这是一个不需要等宽字体的解决方案，只需要非常小的javascript代码，不需要计算计算样式，甚至支持IME，支持RTL文本。

// copy the text from input to the span $(function () { $('.input').on('input', function () { $('.text').text($('.input').val()); }); }); * { box-sizing: border-box; } .container { display: inline-block; position: relative; } .input, .text { margin: 0; padding: 2px 10px; font-size: 24px; line-height: 32px; border: 1px solid #ccc; box-radius: 3px; height: 36px; font: 20px/20px sans-serif; /* font: they should use same font; */ } .text { padding-right: 20px; display: inline-block; visibility: hidden; white-space: pre; } .input { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; } <script src="https://code.jquery.com/jquery-3.2.0.min.js"></script> <div class="container"> <span class="text"> some text </span> <input class="input" value="some text" /> </div>

利用张成的空间。文本来适应文本的宽度，并让输入有相同的大小与它的位置:绝对容器。每次变化时，将输入的值复制到span中(您可以轻松地将这段代码更改为普通JS，或者使用前端框架提供的特性)。因此，输入将适合其内容的大小。

如果你使用Bootstrap，它可以很容易地完成:

<div contenteditable="true" class="form-control" style="display: inline"></div>

您只需要获取div的内容，并在提交表单之前将其放入隐藏输入中。

为什么不使用css呢?

<div id="wrapper">
  <input onkeyup="keyup(event)">
  <div id="ghost"></div>
</div>

函数keyup(e) { . getelementbyid(“鬼”)。innerText = e.target.value; ｝ #包装{ 位置:相对; min-width: 30 px; 显示:inline-block; ｝ 输入{ 位置:绝对的; 左:0; 右:0; 边框:1px纯蓝色; 宽度:100%; ｝ #鬼{ 颜色:透明; ｝ < div id = "包装" > <输入onkeyup = "按键弹起(事件)" > < div id = "鬼" > < / div > < / div >

wrapper {
  position: relative;
  min-width: 30px;
  border: 1px solid red;
  display: inline-block;
}

input {
  position: absolute;
  left:0;
  right:0;
  width: 100%;
}

#ghost {
  color: transparent;
}

这段代码是由@Iain Todd介绍的，我认为我应该分享它

这是一个不需要等宽字体的解决方案，只需要非常小的javascript代码，不需要计算计算样式，甚至支持IME，支持RTL文本。

// copy the text from input to the span $(function () { $('.input').on('input', function () { $('.text').text($('.input').val()); }); }); * { box-sizing: border-box; } .container { display: inline-block; position: relative; } .input, .text { margin: 0; padding: 2px 10px; font-size: 24px; line-height: 32px; border: 1px solid #ccc; box-radius: 3px; height: 36px; font: 20px/20px sans-serif; /* font: they should use same font; */ } .text { padding-right: 20px; display: inline-block; visibility: hidden; white-space: pre; } .input { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; } <script src="https://code.jquery.com/jquery-3.2.0.min.js"></script> <div class="container"> <span class="text"> some text </span> <input class="input" value="some text" /> </div>

利用张成的空间。文本来适应文本的宽度，并让输入有相同的大小与它的位置:绝对容器。每次变化时，将输入的值复制到span中(您可以轻松地将这段代码更改为普通JS，或者使用前端框架提供的特性)。因此，输入将适合其内容的大小。

我认为你误解了最小宽度CSS属性。min-width通常用于在流体布局中定义最小DOM宽度，例如:

input {
  width: 30%;
  min-width: 200px;
}

这将把输入元素的最小宽度设置为200像素。在这里，“px”代表“像素”。

现在，如果您试图在用户提交输入字段时确保输入字段至少包含一个字符，则需要使用JavaScript和PHP进行一些表单验证。如果这确实是你想要做的，我会编辑这个答案，尽我最大的努力帮助你。

演进版:

<input type="text" style="width: {tag.length}ch" bind:value={tag} />