基於CSS中的初始值設置的文本域寬度

當我在容器中有一組Span域元素時，它們從左到右堆疊（並在必要時轉到下一行），更重要的是，它們中的每一個都是根據它們中有多少內容自動設置的。基於CSS中的初始值設置的文本域寬度

有沒有辦法達到類似的效果與文本字段元素（有初始值），而不是跨度？自動調整寬度至關重要，即我希望文本字段的寬度與其初始值所需的寬度相同。我知道這在某種程度上可以在JS中實現，但我更喜歡CSS解決方案。

（我看其他問題，但他們似乎都定位到文本字段寬度應該動態地改變，而不是基於初始值來設定的情況下）。

2017-05-31 Mohsen

我不是當然，你可以只用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>

上建議的一個例子

來源

2017-05-31 20:14:35 pokeybit

基於CSS中的初始值設置的文本域寬度

回答

相關問題