Envelopper un mot en utilisant CSS après n caractères numériques ou pixels

Question

J'utilise ce lien. Sur cette page, lorsque vous commencez à taper @ caractères dans la première zone de texte, le système affiche une liste déroulante avec certaines valeurs. Je veux m'assurer, après chaque 20 caractères, que le texte devrait être placé dans la ligne suivante.

J'ai essayé d'ajouter le style suivant au tag <li> mais cela n'a pas aidé.

word-wrap:break-word; 
max-width:30px; 

Answer 1

J'utiliser quelque chose comme:

li { word-wrap:break-word; max-width:20ch;} 

Il ne casse pas le mot à 20 caractères, mais enveloppe plutôt le texte quand il frappe la limite de 20 caractères.

Answer 2

cette classe aidé ajoutant:

.dropdown.suggest>.dropdown-menu>li>a { 
    white-space: normal; 
}