Comment puis-je créer & lt; legend & gt; habillage de texte?

Généralement <legend> texte est assez court, donc j'ai eu aucune idée de cela a été un problème jusqu'à ce que j'ai rencontré hier. J'ai été d'essayer et de ne pas définir de 50% de la largeur sur une <fieldset>mais il ne fonctionne pas à cause du long texte de légende. Le fieldset de ne pas être plus petite que la légende, ou la légende de la largeur dépasse celle de la fieldset.

Ce n'est pas semblent être un problème avec IE8, Chrome, Safari, Opera, et peut-être d'autres. Il est un problème dans Firefox, IE6 et IE7.

Objectif: Obtenir le texte de l'envelopper dans un <legend> de la croix-navigateur

  • Sans des largeurs fixes
  • Espérons-le, sans supplément de balisage
  • Sans javascript
  • Toute façon, nous pouvons si le ci-dessus sont impossibles
  • Sans renoncer à et en utilisant un autre tag

J'ai vu ce post: Obtenir la LÉGENDE des balises pour enrouler correctement le texte

...Mais il n'y a qu'une seule réponse qui utilise un <div> avec une largeur fixe à l'intérieur de la légende de la balise, je ne peux pas vraiment le faire fonctionner (voir violon), et de l'OP fermé avec le commentaire "en fin de compte nous a donné". Googler ce sujet tourne un tas de "pas beaucoup" ainsi.

J'ai mis en place un jsfiddle démo avec un peu de CSS, j'ai essayé. Comme je l'ai dit, je n'ai jamais couru avant, donc je suis déconcerté que c'est si difficile, et je n'arrive pas à trouver quelque chose à travailler. Est-il vraiment impossible?

source d'informationauteur Wesley Murch | 2011-05-26

  1. 19

    Ajoutant white-space: normal; la légende fonctionne bien sauf dans IE7 et IE6. Veuillez voir cette jsfiddle démo

    Après avoir joué un peu avec le CSS, je l'ai eu à travailler sur IE7, IE8, IE9, FF3-4, et Chrome11 par l'ajout d'un <span> à l'intérieur de la <legend> avec les CSS:

    legend {
    white-space: normal; 
    width: 100%;
    *margin-left: -7px;
}
legend span {
    display:block;
    width: 100%;
}

    Veuillez jeter un oeil à ce jsfiddle

  2. 7

    Il a été un moment depuis que la question a été posté, mais maintenant, IE10 est ici pour un certain temps et encore, c'est nul tout en étant tellement "moderne". en outre, on a pas la possibilité d'utiliser commentaire conditionnel. Voici ce que fait le truc: 

    legend {
  white-space: normal;
  display: table; /* IE10 */
}
  3. 5

    Ajouter white-space:normal à votre légende pour forcer le texte à enrouler.

    legend{
    color:green;
    white-space:normal;
}

    Pour en savoir plus, consultez cet article: http://beckism.com/2008/12/display_block_legend/

  4. 3

    Essayer cette approche plus simple:

    legend{
    color:green;
    white-space: normal;
}

    Qui devrait régler votre légende. Votre prochain problème devient la couleur de fond de votre fieldset, mais c'est facilement résolu en enveloppant le tout dans une div et de style.