DIV 안에있는 텍스트가 항상 줄 바꿈하지 않습니다

Question

편집 가능한 DIV here을 만들었습니다. 텍스트는 필자가 원하는 것처럼 배치됩니다. 하지만, 텍스트가 일반 텍스트 인 경우에만 텍스트가 줄 바꿈된다는 점에 주목했습니다. 아래 이미지에서 마크 업으로 텍스트를 붙여 넣었습니다. 이 문제를 해결할 수있어 DIV 내부의 텍스트가 항상 줄 바꿈됩니까? 편집 가능한 DIV에 대한

코드 :

.editableDiv { 
    padding: 5px; 
    -webkit-user-modify: read-write; 
    -moz-user-modify: read-write; 
    user-modify: read-write;  
    word-wrap: break-word; 
    box-sizing: border-box; 
    background-color: #FAC28A; 
    color: #003399; 
} 

Answer 1

왜 .spanDateEventHeader 클래스 word-wrap: break-word;를 사용하지 않습니다. 이것은 그것이 사업부를 떠나지 않았는지 확인합니다.

Answer 2

분명히 pre 요소를 사용하고 있습니다.

빠른 해결책은 pre 요소에 공백 속성을 사용하는 것입니다.

당신의 CSS를이 추가 :

pre { 
    white-space: pre-wrap;  /* Since CSS 2.1 */ 
    white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ 
    white-space: -pre-wrap;  /* Opera 4-6 */ 
    white-space: -o-pre-wrap; /* Opera 7 */ 
    word-wrap: break-word;  /* Internet Explorer 5.5+ */ 
}