你可以设置大小属性。 如果你正在使用一个响应式框架，下面的代码就足够了:

<input size="{{ yourValue.length }}" [value]="yourValue" />

但如果你使用纯js，你应该设置事件处理程序，像这样:

<input oninput="this.setAttribute('size', this.value.length)" />

这个答案提供了在浏览器中检索文本宽度的最准确的方法之一，比公认的答案更准确。它使用canvas html5元素，不像其他答案，不将元素添加到DOM，从而避免了过多添加元素到DOM引起的任何回流问题。

阅读更多关于Canvas元素与文本宽度的关系。

注意:根据MDN, getPropertyValue()方法的简写版本(如font)可能不可靠。我建议单独获取值以提高兼容性。我只是为了提高速度才用的。

/** * returns the width of child text of any DOM node as a float */ function getTextWidth(el) { // uses a cached canvas if available var canvas = getTextWidth.canvas || (getTextWidth.canvas = document.createElement("canvas")); var context = canvas.getContext("2d"); // get the full font style property var font = window.getComputedStyle(el, null).getPropertyValue('font'); var text = el.value; // set the font attr for the canvas text context.font = font; var textMeasurement = context.measureText(text); return textMeasurement.width; } var input = document.getElementById('myInput'); // listen for any input on the input field input.addEventListener('input', function(e) { var width = Math.floor(getTextWidth(e.target)); // add 10 px to pad the input. var widthInPx = (width + 10) + "px"; e.target.style.width = widthInPx; }, false); #myInput { font: normal normal 400 normal 18px / normal Roboto, sans-serif; min-width: 40px; } <input id="myInput" />

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

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

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

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

更好的是onvalue:

<input id="txt" type="text" onvalue="this.style.width = ((this.value.length + 1) * 8) + 'px';">

它还包括粘贴、拖放等。

你可以这样做

// HTML
<input id="input" type="text" style="width:3px" />
// jQuery
$(function(){
  $('#input').keyup(function(){
    $('<span id="width">').append( $(this).val() ).appendTo('body');
    $(this).width( $('#width').width() + 2 );
    $('#width').remove();
  });
});

​

​

更新答案https://stackoverflow.com/a/41389961/1022684

如果你有多个输入并且不想重复输入文本:

  $(() => {
    $('.container input').on('input', (e) => {
      $(e.target).prev().text($(e.target).val())
    })  
    $('.container input').each((idx, elem) => {
      $(elem).prev().text($(elem).val())
    })
  })