最小宽度和宽度适合不在文本区域或输入上工作的内容

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"的跨度