Jeu de largeur de champ de texte basé sur la valeur initiale dans CSS

Question

Lorsque j'ai un ensemble d'éléments Span dans un conteneur, ils sont empilés de gauche à droite (et passent à la ligne suivante si nécessaire), et plus important encore, la largeur de chacun d'entre eux est automatiquement défini en fonction de la quantité de contenu qu'ils contiennent.

Existe-t-il un moyen d'obtenir un effet similaire avec les éléments textfield (qui ont des valeurs initiales) au lieu de span? Les largeurs ajustées automatiquement sont cruciales, c'est-à-dire que je veux que les champs de texte soient aussi larges que leurs valeurs initiales le requièrent. Je sais que cela peut être réalisé dans une certaine mesure dans JS, mais je préfère une solution CSS.

(je l'ai regardé d'autres questions, mais ils semblent tous viser les cas où la largeur de champ de texte est censé changer dynamiquement, pour ne pas être mis en fonction de la valeur initiale.)

Answer 1

Je ne suis pas Assurez-vous que vous pouvez simplement avec CSS, vous pouvez avec javascript cependant! Bouclez chaque champ de saisie et définissez la taille par rapport à la longueur de la chaîne de valeurs.

$('.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">

Ou encore cette solution de contournement bancale Auto-scaling input[type=text] to width of value? ci-dessous est un exemple d'une suggestion sur cette page

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>