Force travées à envelopper Inline-Block parent

Question

J'écris une application où j'enveloppe les caractères individuels dans les intervalles pour mieux gérer les événements de clic. Les caractères sont dans une div avec display: inline-block. Comment puis-je obtenir le texte à envelopper? J'ai essayé:

div { 
    display: inline-block; 
    word-wrap: wrap; 
    word-break: break-all; 
} 

ainsi que

overflow-wrap: break-word; 
white-space: pre-wrap; 

en vain. Comme vous pouvez le voir, cela fonctionne sur du texte normal, mais pas sur du texte enveloppé dans des travées.

JSBin: http://jsbin.com/hugiqohawi/edit?html,css,output

Answer 1

Définissez une largeur pour vos div éléments. Les span s seront emballés à ce stade.

Pour une largeur de fluide, utiliser 100%:

div { 
    display: inline-block; 
    word-wrap: wrap; 
    word-break: break-all; 
    width: 100%; 
}