미디어쿼리도 썼고 가로 스크롤도 없앴는데 글자가 잘려 보이는 현상

 

 

현상 : 아래와 같이 글자가 긴데 화면 크기에 따라 글자가 자동으로 맞춰지지 않고 가로스크롤이 생긴다. 

 

문제 : 가로 스크롤 없이 화면 크기에 따라 모든 컨텐츠가 자동으로 들어와야 한다. 즉, 반응형이 되야 한다. 

 

 

x 해결 1 : 처음에 반응형 문제인줄 알고 미디어 쿼리를 넣어봤는데 안됨. 

 

@media (min-width: 768px) {

  body {

    font-size: 11px;

    line-height: 1.6;

  }

}

 

 

 

x 해결 2 : 가로 스크롤없애면 될 줄 알고 아래 코드 넣어봤는데 안됨. 

 

overflow-x: hidden;

 

 

 

o 해결 3 : pre, code태그에 있는 콘텐츠가 있었는데 아래와 같이 자동줄바꿈 하니 해결됨.

 

pre, code {

     white-space: pre-wrap; /* 코드블록 줄바꿈 허용 */

}