Html 如何调整an的宽度<；输入>；是否自动使用CSS中包含的标签的长度（大小）？

我有一个css问题。我有一个输入，点击上传按钮后可以自动填写pdf文件的名称。问题是，在某些情况下，此pdf的名称可能非常长因此，我的目标是找到一个css技巧，如何使用包含标签自动调整此

的长度。

代码示例：

<input id="name" style="    margin-left: 83px;"
            placeholder="#{label['lbl.common.fileName']}"
            value="#{modelController.document.nameDoc}" />

请这个屏幕截图可以解释更多的问题

任何想法都值得赞赏

---

您基本上需要一个动态输入字段，其中宽度将因输入的内容（上传的PDF）而改变大小。您将需要一些JS来运行它。像这样：

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

---

两种解决方案似乎是合理的：

与其动态设置宽度，不如让输入填满所有可用空间，例如：

<form style="display:grid; grid-template-columns:200px auto">
  <input type="file"><input type="text">
</form>

它的行为与普通的

（或者您使用的任何标记）完全相同，只是用户可以编辑它的内容。请记住，用户可能可以通过这种方式将格式化文本粘贴到其中，因此，如果文本是从格式化的地方复制粘贴的，则可能会以粗体或斜体结尾

还记得在发送表单之前通过JavaScript读取值，因为

contenteditable

本身不会生成表单字段

---

您是否尝试过在输入字段上溢出？请共享您尝试过的代码是否可以在此处共享您的代码…我已经更新了问题

<span contenteditable="true" style="border:1px solid #000">file name here</span>