Les options de la liste de sélection peuvent-elles être renvoyées à la ligne et mises en retrait ?

Les options de liste de sélection peuvent-elles renvoyer à la ligne et mettre en retrait le texte ?

La création de listes de sélection avec de longues valeurs d'option peut poser des problèmes de formatage. Malheureusement, le code HTML standard les balises ne peuvent pas envelopper ou mettre en retrait le texte.

Solution personnalisée

Pour réaliser l'habillage et l'indentation, on peut envisager de mettre en œuvre une solution personnalisée. Au lieu d'utiliser l'option balises, créez un menu déroulant personnalisé via JavaScript ou un plugin de menu.

Cette approche offre une flexibilité dans le formatage du texte et permet des ajustements dynamiques pour s'adapter à diverses options. longueurs.

Exemple :

<div>

const menu = document.getElementById('my-menu');

// Apply custom formatting to long options
menu.querySelectorAll('li').forEach(option => {
  if (option.offsetWidth > menu.offsetWidth) {
    option.style.whiteSpace = 'nowrap';
    option.style.marginLeft = '1em';
  }
});

Alternatives

Si la mise en œuvre d'une solution personnalisée n'est pas viable, une approche alternative consiste à réduire les valeurs des options longues. Cependant, cela ne produit pas toujours l'effet visuel souhaité.

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!