[Jekyll] Minimal Mistakes 테마에서 줄바꿈 속성 변경하기

개요

Minimal Mistakes 테마에서 모바일 환경의 가로 스크롤 문제를 해결하기 위한 줄바꿈 속성 변경 방법을 정리한다.

들어가며

Jekyll 블로그의 테마로 Minimal Mistakes를 사용하고 있는데 포스트 본문의 단어나 문장에 따라 단말 화면을 벗어나서 렌더링 되는 경우가 있다. 이로 인하여 모바일 환경에서는 포스트 본문에 가로 스크롤이 생기게 되는데 너무 거슬려서 해결 방법을 찾아보았다.

정리

1. _base.scss에 word-break 속성과 overflow-wrap 속성 지정

h1,
h2,
h3,
h4,
h5,
h6,
nav,
ul {
  word-break: break-all;
  overflow-wrap: break-word;
}

2. 결과 확인

word-break 속성 및 overflow-wrap 속성 지정 전과 지정 후

참고

• https://wit.nts-corp.com/2017/07/25/4675