인라인 블록 부모를 감싸기 위해 강제 적용 범위

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%; 
}