css - Force Spans to Wrap In Inline-Block Parent -

i'm writing app wrap individual characters in spans better handle click events. characters in div display: inline-block. how text wrap? i've tried:

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

as as

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

to no avail. can see, works on normal text, not on text wrapped in spans.

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

set width div elements. spans wrap @ point.

for fluid width, use 100%:

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