输入元素内容的 CSS 宽度。 min-content 不适用于输入[重复]答案

【问题标题】：CSS width of input element's contents. min-content doesn't work for inputs [duplicate]输入元素内容的 CSS 宽度。 min-content 不适用于输入[重复]
【发布时间】：2021-11-08 07:24:24
【问题描述】：

min-content 和 max-content 似乎并不关心输入元素的值：

input {
  border: 1px solid black;
  width: min-content;
}

&lt;input type="text"&gt;

CSS 在计算 min-content 时完全忽略了输入的值，只是使用了一些无论内容如何都不会改变的默认宽度：

如何让 CSS 将“内容”（值）宽度考虑在内：

不使用javascript设置width、min-width或max-width

【问题讨论】：

@tacoshy 否，因为答案非常明确地设置了width，min-width，max-width
您无法获得其他答案。 CSS 无法设置宽度以适应内容。做到这一点的唯一方法是通过脚本，但如果您不允许使用宽度，您显然无法设置元素的宽度。
考虑使用contenteditable 元素。
@tacoshy 副本上的最佳答案对这个问题有一个解决方案：使用 JS 和 width: auto; 设置 size

标签： javascript html jquery css

【解决方案1】：

没有 JavaScript 是不可能的。

您必须以编程方式将输入的宽度设置为其值的长度。这可以使用ch 单元来简化。

document.querySelector('input').addEventListener('input', function() {
  this.style.width = this.value.length + 'ch'
})

&lt;input type="text"&gt;

【讨论】：

JavaScript 是允许的，只是不允许在输入中使用 width、min-width、max-width
@theonlygusti 如果不使用这些属性之一，则无法使用 JS 或 CSS。
那么 CSS 可以使用这些属性吗？
@theonlygusti 不，如果您不能使用这些属性，则根本无法设置输入的宽度。
只有JS不允许设置这些属性。如果这是不可能的，那么选择的答案就是证明这是不可能的。