html - 最小宽度和宽度适合内容不适用于文本区域或输入

Question

我需要文本区域或输入的最小宽度，较小的一个，如果数据变大，则水平调整大小并插入小时标签。

我尝试使用最小宽度和适合内容的宽度但没有用

<label class="dark-regular-text">Estimated completion:</label>
<label class="regular-text u-padding-left-8"><textarea type="text" class="input--estimation " style=" min-width: 40px;
     width: fit-content; border-bottom:1px solid black"> 2123  </textarea>Hours</label>

我需要前任。预计完成:1 小时，如果数据像这样变大 预计完成:432 小时

Answer 1

您可以使用一些 javascript 来实现。查看工作片段:

.inp {
    border: 1px solid black;
    text-align: center;
    outline: none;
    min-width:2px;
}
span {
    display: inline-block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<span>Estimated completion:</span>

<span> <input class="inp" type="text" onkeypress="this.style.width = (this.value.length + 1) + 'ch';"></span>
   

<span> Hours.</span>

或者，您可以只使用 contenteditable="true"

的跨度