基于CSS中的初始值设置的文本域宽度

问题描述：

当我在容器中有一组Span域元素时，它们从左到右堆叠（并在必要时转到下一行），更重要的是，它们中的每一个都是根据它们中有多少内容自动设置的。基于CSS中的初始值设置的文本域宽度

有没有办法达到类似的效果与文本字段元素（有初始值），而不是跨度？自动调整宽度至关重要，即我希望文本字段的宽度与其初始值所需的宽度相同。我知道这在某种程度上可以在JS中实现，但我更喜欢CSS解决方案。

（我看其他问题，但他们似乎都定位到文本字段宽度应该动态地改变，而不是基于初始值来设定的情况下）。

答

我不是当然，你可以只用CSS，但你可以用JavaScript！循环访问每个输入字段并设置相对于值字符串长度的大小。

$('.in').each(function(i, obj) { 
 
    $(obj).attr('size', $(obj).val().length); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<input type="text" value="test 1" class="in"> 
 
<input type="text" value="test 12123131" class="in"> 
 
<input type="text" value="test 1414151555151" class="in"> 
 
<input type="text" value="test 1123" class="in"> 
 
<input type="text" value="test 312321" class="in">

甚至这个靠不住的解决方法如下Auto-scaling input[type=text] to width of value?是页面

span { 
 
border:1px inset #ddd; 
 
padding:2px; 
 
}

<span contenteditable="true">dummy text</span> 
 
<span contenteditable="true">possible</span> 
 
<span contenteditable="true">duplicate</span> 
 
<span contenteditable="true">haha</span> 
 
<span contenteditable="true">go and view this solution</span> 
 
<span contenteditable="true"><a target="_blank" href="https://stackoverflow.com/questions/8100770/auto-scaling-inputtype-text-to-width-of-value">https://stackoverflow.com/questions/8100770/auto-scaling-inputtype-text-to-width-of-value</a></span>

上建议的一个例子

基于CSS中的初始值设置的文本域宽度

相关推荐