Propriété CSS word-wrap pas de travail pour sélectionner l'élément sur Firefox

J'ai un html déroulante. Dans la liste déroulante, certaines options ont de longues chaînes de caractères sans espaces. Je veux enrouler ces options dans la ligne suivante. J'ai utilisé le CSS word-wrap de la propriété. Il fonctionne très bien pour moi dans Chrome, mais pas sous Firefox.

J'ai aussi essayé d'utiliser le word-break de la propriété, comme l'a suggéré dans le double

J'ai aussi fait une démo sur jsfiddle. Il semble bien, sur Chrome, mais si vous ouvrez la démo sur Firefox, le texte n'est pas à l'envelopper. Comment puis-je résoudre ce problème?

CSS:

.setWidth {
  width: 300px
}

HTML:

<div class="col-lg-3 col-md-4 col-sm-4 col-xs-4">
  <select class="formNamesList setWidth" id="CustomCategories" name="CustomCategories" size="15">
    <option value="10085240">_1Test_Today</option>
    <option value="10085242">_1Test_Today_A</option>
    <option value="10085091" style="word-wrap:break-word">testcust_copyFinal_copytetshhshshshhshshhshshshhshshhshshhshshshshhshshshshhshshshshhshshhshs</option>
  </select>
</div>

  • css-tricks.com/almanac/properties/w/word-break
  • double possible de le retour à la ligne ne fonctionne pas sous firefox, tout essayé
  • J'ai vu que des liens. mais pas de chance avec les chaînes qui n'ont pas de places de @hbirjand
  • Bienvenue à Débordement de Pile! J'ai édité ton post pour inclure le code HTML et CSS en un fragment de code, dans le cas où les gens ne peuvent pas l'obtenir jsfiddle.net qui peuvent se produire dans certains environnements d'entreprise. J'ai aussi ajouté du texte indiquant que vous avez regardé l'a suggéré en double, ce qui est toujours une bonne idée pour éviter la fermeture. J'ai aussi mis à jour le titre pour être plus clair sur ce qui est exactement pas de travail.
  • Ok merci, Mike. .:)
InformationsquelleAutor Bharat Sewani | 2015-04-29
  1. 3

    Non, vous ne pouvez pas wrap le texte dans un natif sélectionner. Vous pouvez utiliser les plugins jquery
    pour atteindre cet objectif.
    Voici plus de détails

    Encore, vous pouvez essayer ce pour voir si elle fonctionne:

    break-word
    Indique que normalement incassable mots peut être rompu à l'arbitraire des points si il n'y a pas autrement acceptable des points de rupture dans la ligne.

    pré
    Les séquences d'espaces sont préservés, les lignes ne sont brisés à caractères de saut de ligne dans la source et à l'
    éléments.

    pre-wrap
    Les séquences d'espaces sont préservés. Les lignes sont brisés à caractères de saut de ligne, à l'
    et, si nécessaire, à la ligne de remplissage des boîtes.

      word-wrap: break-word;      /* IE*/
  white-space: -moz-pre-wrap; /* Firefox */
  white-space: pre-wrap;      /* other browsers */
  width:150px;
  display:inline-block
    • merci pour votre réponse Kurenai. 🙂 J'ai essayé votre code CSS solution.Mais cela ne fonctionne pas.Je pense que j'ai besoin de prendre du plugin
    • C'était la première ligne de ma réponse :). Il n'est pas possible de les envelopper de sélectionner des étiquettes.
    • CSS solution fonctionne sauf que certaines parties de la parole est couvert par la barre de défilement
    InformationsquelleAutor Kurenai Kunai