这是一个普通的JS和jQuery插件，我写的，将处理调整输入元素使用画布和字体大小/家族，以确定实际的字符串长度时，渲染。(只适用于> IE9, chrome, safari, firefox, opera和大多数其他主要的浏览器，已经实现了画布元素)。

普通JS：

function autoSize(input, o) {
    o || (o = {});
    o.on || (o.on = 'keyup');

    var canvas = document.createElement('canvas');
    canvas.setAttribute('style', 'position: absolute; left: -9999px');
    document.body.appendChild(canvas);

    var ctx = canvas.getContext('2d');

    input.addEventListener(o.on, function () {
        ctx.font = getComputedStyle(this,null).getPropertyValue('font');
        this.style.width = ctx.measureText(this.value + '  ').width + 'px';
    });
}

//Usage
autoSize(document.getElementById('my-input'));

jQuery插件:

$.fn.autoSize = function(o) {
  o = $.extend({}, {
    on: 'keyup'
  }, o);

  var $canvas = $('<canvas/>').css({position: 'absolute', left: -9999});
  $('body').append($canvas);

  var ctx = $canvas[0].getContext('2d');

  return this.on(o.on, function(){
    var $this = $(this);
    ctx.font = $this.css('font');
    $this.width(ctx.measureText($this.val()).width + 'px');
  })
}

//Usage:
$('#my-input').autoSize();

注意:这将不处理文本转换，行间距和字母间距，以及其他一些文本大小变化属性。要处理文本转换属性，请设置并调整文本值以匹配该属性。其他的可能相当直截了当。如果这开始获得一些吸引力，我会实施……

这是一个不需要等宽字体的解决方案，只需要非常小的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，或者使用前端框架提供的特性)。因此，输入将适合其内容的大小。

下面是使用DIV和' contentteditable '属性来解决这个问题的另一种方法:

HTML:

<div contenteditable = "true" class = "fluidInput" data-placeholder = ""></div>

CSS:(给DIV一些维度，使它更容易看到)

.fluidInput {

    display         : inline-block;
    vertical-align  : top;

    min-width       : 1em;
    height          : 1.5em;

    font-family     : Arial, Helvetica, sans-serif;
    font-size       : 0.8em;
    line-height     : 1.5em;

    padding         : 0px 2px 0px 2px;
    border          : 1px solid #aaa;
    cursor          : text;
}


.fluidInput * {

    display         : inline;

}


.fluidInput br  {

    display         : none;

}


.fluidInput:empty:before {

    content         : attr(data-placeholder);
    color           : #ccc;

}

注意:如果你计划在你计划提交的FORM元素中使用这个，你将需要使用Javascript / jQuery来捕获提交事件，这样你就可以解析DIV的“值”(分别是. innerhtml或.html())。

值得注意的是，当字体是等宽的时候，可以进行漂亮的大小调整，所以我们可以使用ch单位完美地调整输入元素的大小。

同样，在这种方法中，我们可以通过在输入事件上更新CSS变量(自定义属性)来更新字段的宽度，我们还应该照顾已经在DOMContentLoaded事件上预先填充的输入

Codepen演示

标记

<input type="text" value="space mono font" class="selfadapt" />

CSS

:root { --size: 0; }

.selfadapt {
   padding: 5px;
   min-width: 10ch;
   font-family: "space mono";
   font-size: 1.5rem;
   width: calc(var(--size) * 1ch);
}

作为根变量，我们设置——size: 0:这个变量将包含输入的长度，它将在calc()表达式中乘以1ch。默认情况下，我们也可以设置最小宽度，例如10ch

Javascript部分读取插入值的长度并更新变量——size:

JS

let input = document.querySelector('.selfadapt');
let root  = document.documentElement.style;

/* on input event auto resize the field */
input.addEventListener('input', function() {
   root.setProperty('--size', this.value.length );
});

/* resize the field if it is pre-populated */
document.addEventListener("DOMContentLoaded", function() {
   root.setProperty('--size', input.value.length);
});

当然，即使你不使用等宽字体，这仍然有效，但在这种情况下，你将需要通过将——size变量乘以另一个不同于1ch的值(它严格依赖于font-family和font-size)来改变calc()公式。

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

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

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

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

下面是一个简单的函数来获取所需的内容:

function resizeInput() {
    const input = document.getElementById('myInput');
    input.style.width = `${input.scrollWidth}px`;
};