CSS - pre 자동 줄바꿈 적용하기

웹개발시, 긴 텍스트등을 출력할 때 보기에 pre가 가장 적절하다.

그런데 pre 태그를 사용하면 기본적으로 줄바꿈이 되지 않는다.

• 줄바꿈이 되지 않은 상태:

 

인터넷 상에 다양한 코드가 있지만, 가장 확실한건 아래와 같이 pre 를 CSS에 적용하고 해결 되었다

    pre {
      overflow: auto; white-space: pre-wrap; word-wrap: break-word;
    }

• 줄바꿈이 적용 상태: