強制的にインラインブロックの親に折り返すようにする

Question

クリックイベントをよりうまく処理するために、スパンで個々の文字をラップするアプリを作成しています。文字はdisplay: inline-blockのdivにあります。どのようにテキストを折り返すのですか？私が試した：

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

など

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

を無駄に。ご覧のとおり、通常のテキストでは動作しますが、スパンで囲まれたテキストでは動作しません。

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

Answer 1

は、あなたのdivの要素の幅を設定します。 spanはこの時点で折り返します。流体幅について

、100%を使用する：

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