이 워드프레스에서 제목에 ERR_CONNECTION_TIMED_OUT이 포함되어 줄바꿈이 어색하게 되는 현상이 발생했습니다.
단어 단위로 줄바꿈이 되기 때문에 긴 단어가 있을 경우 위의 그림과 같이 어색하게 줄바꿈이 발생하는 문제가 발생했습니다. 블로그 글 제목에서도 마찬가지 현상이 발생했습니다.
워드프레스: 긴 단어 줄바꿈 처리 방법
이런 현상이 발생하는 경우 단어 단위가 아닌 문자 단위로 줄바꿈하도록 CSS 코드를 추가할 수 있습니다.
워드프레스 GeneratePress 테마의 경우 다음과 같은 코드를 사용할 수 있습니다.
/* 문자 단위 줄바꿈 */
.home .entry-header h2 a, .archive .entry-header h2 a, h1.entry-title {
word-break: break-all;
}커스텀 CSS 코드는 외모 » 사용자 정의하기 » 추가 CSS에 추가하거나 차일드 테마 폴더 내의 스타일시트 파일(style.css)에 입력하시기 바랍니다.
위의 코드를 추가하면 전면 페이지의 최신 글, 아카이브 페이지(카테고리/태그 페이지), 블로그 포스트의 제목(H1 태그)에서 문자 단위로 줄바꿈이 됩니다.
word-break CSS 속성에 대한 자세한 내용은 모질라(Mozilla) 문서를 참고할 수 있습니다.
상기 코드를 적용하면 다음과 같이 전면 페이지 최신글 리스트의 제목이 문자 단위로 줄바꿈되어 자연스럽게 보입니다.
테마에 따라 실제 CSS 코드는 조금씩 다를 수 있습니다.
기본적인 CSS를 이해하면 쉽게 응용이 가능하며, 다른 요소에서도 긴 단어 때문에 부자연스럽게 줄바꿈이 되는 경우 이 글에 제시된 방법을 시도해볼 수 있습니다.