[Tistory CSS] pre 태그 모바일 화면에서 가로 스크롤 나타내기

코드 블럭이나 예시 화면을 생성하는 pre 태그가 모바일 화면에서는 가로폭에 맞게 줄어들어 긴 문장이 다음줄로 넘어가게 된다. 그러면 가독성이 무척 떨어지게 된다.

 

티스토리 블로그 -> 스킨편집 -> HTML 편집 -> CSS 로 들어가서 

아래 클래스를 다음과 같이 변경하면 가로폭이 작은 화면에서는 스크롤이 생기고 코드블럭 단락이 줄바뀜되지 않고 유지 된다.

 

.entry-content pre {
word-break:break-all;
white-space:pre-wrap;
/* word-wrap:break-word; */
}
.entry-content pre code {
padding: 20px;
white-space: pre;
overflow-x: auto;
-webkit-overflow-scrolling:touch;
}