Force Spans to Wrap In Inline-Block Parent

Question

I'm writing an app where I wrap individual characters in spans to better handle click events. The characters are in a div with display: inline-block. How do I get the text to wrap? I've tried:

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

as well as

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

to no avail. As you can see, it works on normal text, but not on text wrapped in spans.

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

Answer 1

Set a width for your div elements. The spans will wrap at this point.

For a fluid width, use 100%:

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