Nouvelle propriété CSS Le dimensionnement des champs peut adapter la saisie, la zone de texte et la sélection à leur contenu.

Présentation du dimensionnement des champs

field-sizing est une nouvelle propriété CSS qui permet aux entrées, aux zones de texte et aux sélections de s'adapter automatiquement à la taille de leur contenu.

• fixed , qui est le comportement actuel des entrées, des zones de texte et des sélections, où elles ont une taille fixe quel que soit le contenu.
• content , fait que l'élément de formulaire s'adapte à la taille du contenu

Lorsque vous l'appliquez à une entrée ou à une sélection, il s'adaptera à la largeur du contenu. Lorsque vous l'appliquez à une zone de texte, il s'adaptera à la hauteur du contenu.

Exemple

<input
  type="text"
  placeholder="input"
  value="this sizes to its content"
/>

<style>input {
  field-sizing: content;
}
</style>

<textarea>
Here is a
Multiline
Textarea
</textarea>


<style>
 textarea {
  field-sizing: content;
  width: 200px;
}
</style>

Choses à noter

• Il fait partie du module d'interface utilisateur de base CSS niveau 4, est toujours au stade de brouillon d'éditeur (ce qui signifie que les choses peuvent et vont changer) et est actuellement une fonctionnalité exclusive à Chromium. Cependant, je m'attends à ce qu'il arrive sur d'autres navigateurs à un moment donné cette année, et Safari a déjà envoyé des signaux positifs, et Firefox devrait emboîter le pas.
• Outre le manque de prise en charge du navigateur, vous devez également vous assurer que votre saisie, votre sélection ou votre zone de texte a certaines limites. Si vous ne le faites pas, il continuera à croître. Vous pouvez le faire en définissant max-width ou max-height sur l'élément
• De même, ajoutez min-width à votre entrée et à votre sélection si vous ne voulez pas qu'elle se réduise à la largeur des espaces ou des points.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!