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"一起使用

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

1 个答案: