[CSS] 텍스트가 div, code block 범위 밖으로 나가는 현상 해결

div 태그 또는 특정 태그에 코드나, 일반 텍스트 입력시 자동으로 줄 바꿈을 하지 못하고 범위를 벗어나는 경우가 있습니다.

저의 경우 블로그 포스팅시 코드블럭(code block) 범위를 벗어나는 경우였습니다.

이 문제를 해결하는 방법은 간단합니다.

div 또는 특정 태그의 스타일을 정해주는 부분에 “word-break:break-all;” 또는 “white-space: pre-wrap;”를 추가하면 됩니다.

div{
  word-break:break-all;
}

pre, code {
    white-space: pre-wrap;
}