<html>
<head>
</head>
<body>
<input type="text" value="1" style="min-width:1px;" />
</body>
</html>
这是我的代码，它不起作用。在 HTML、JavaScript、PHP 或 CSS 中还有其他方法可以设置最小宽度吗？
我想要一个宽度动态变化的文本输入字段，以便输入字段围绕其内容流动。每个输入都有一个内置的 填充2em，这就是问题，第二个问题是min-width根本无法处理输入。
如果我设置的宽度超过所需的宽度而不是整个程序混乱，我需要 1px 的宽度，只有在需要时才需要更多。
在现代浏览器版本中，CSS 单元ch也可用。据我了解，它是与字体无关的单位，其中1ch等于0任何给定字体中字符（零）的宽度。
因此，像下面这样简单的东西可以用作调整大小函数：
var input = document.querySelector('input'); // get the input element
input.addEventListener('input', resizeInput); // bind the "resizeInput" callback on "input" event
resizeInput.call(input); // immediately call the function
function resizeInput() {
this.style.width = this.value.length + "ch";
}input{ font-size:1.3em; padding:.5em; }<input>该示例会将“elem”的大小调整为值的长度 + 2 个额外字符。
单位 ch 的一个潜在问题是，在许多字体（即 Helvetica）中，字符“m”的宽度超过了字符 0 的宽度，而字符“i”要窄得多。根据这篇文章，1ch 通常比平均字符宽度宽，通常宽 20-30% 左右。
要计算当前输入的宽度，您必须将其嵌入到一个临时span元素中，将该东西附加到 DOM，使用该scrollWidth属性获取计算出的宽度（以像素为单位）并span再次删除。当然，您必须确保input在 和span元素中使用相同的字体系列、字体大小等。因此，我为他们分配了相同的class。
我将函数附加到keyup事件中，因为keypress输入字符尚未添加到 input 中value，因此将导致错误的宽度。不幸的是，我不知道如何摆脱输入字段的滚动（在字段末尾添加字符时）；它滚动，因为在adjustWidthOfInput()调用之前添加并显示了字符。而且，如上所述，我不能反过来这样做，因为那样您将在插入按下的字符之前获得输入字段的值。我稍后会尝试解决这个问题。
顺便说一句，我只在 Firefox (3.6.8) 中测试过这个，但我希望你会明白这一点。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Get/set width of <input></title>
<style>
body {
background: #666;
}
.input-element {
border: 0;
padding: 2px;
background: #fff;
font: 12pt sans-serif;
}
.tmp-element {
visibility: hidden;
white-space: pre;
}
</style>
</head>
<body>
<input id="theInput" type="text" class="input-element" value="1">
<script>
var inputEl = document.getElementById("theInput");
function getWidthOfInput() {
var tmp = document.createElement("span");
tmp.className = "input-element tmp-element";
tmp.innerHTML = inputEl.value.replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>');
document.body.appendChild(tmp);
var theWidth = tmp.getBoundingClientRect().width;
document.body.removeChild(tmp);
return theWidth;
}
function adjustWidthOfInput() {
inputEl.style.width = getWidthOfInput() + "px";
}
adjustWidthOfInput();
inputEl.onkeyup = adjustWidthOfInput;
</script>
</body>
</html>
这里是一个解决方案，而不等宽字体需要，只用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.text以适应文本的宽度，并让输入与position: absolute容器具有相同的大小。span每次更改时复制 input 的值（您可以轻松地将这段代码更改为 vanilla JS，或使用前端框架提供的功能）。所以输入将只适合其内容的大小。
这是对 Lyth 回答的修改，其中考虑到了：
它还允许任意数量的输入字段！要查看它的实际效果：http : //jsfiddle.net/4Qsa8/
脚本：
$(document).ready(function () {
var $inputs = $('.resizing-input');
// Resize based on text if text.length > 0
// Otherwise resize based on the placeholder
function resizeForText(text) {
var $this = $(this);
if (!text.trim()) {
text = $this.attr('placeholder').trim();
}
var $span = $this.parent().find('span');
$span.text(text);
var $inputSize = $span.width();
$this.css("width", $inputSize);
}
$inputs.find('input').keypress(function (e) {
if (e.which && e.charCode) {
var c = String.fromCharCode(e.keyCode | e.charCode);
var $this = $(this);
resizeForText.call($this, $this.val() + c);
}
});
// Backspace event only fires for keyup
$inputs.find('input').keyup(function (e) {
if (e.keyCode === 8 || e.keyCode === 46) {
resizeForText.call($(this), $(this).val());
}
});
$inputs.find('input').each(function () {
var $this = $(this);
resizeForText.call($this, $this.val())
});
});
风格：
.resizing-input input, .resizing-input span {
font-size: 12px;
font-family: Sans-serif;
white-space: pre;
padding: 5px;
}
HTML：
<div class="resizing-input">
<input type="text" placeholder="placeholder"/>
<span style="display:none"></span>
</div>