Divi 테마의 블로그 모듈에서 요약문(Excerpt) 길이 조정하기
워드프레스 Divi 테마에서 블로그 모듈로 블로그 글을 표시할 경우 요약문(Excerpt) 길이가 270로 설정되어 한글 사이트에서 요약문이 지나치게 길게 보이는 현상이 나타났습니다만, Divi 테마가 업데이트되면서 블로그 모듈에서 요약글 길이를 조정할 수 있도록 바뀌었습니다.
CSS를 사용하여 조정해야 하는 경우 아래 내용을 참고해보세요. 예를 들어, 데스크탑과 모바일 기기에서 요약글 길이를 다르게 설정하고 싶은 경우 CSS 미디어 쿼리를 사용하여 아래 코드를 활용할 수 있습니다.
Divi 테마의 블로그 모듈에서 요약문(Excerpt) 길이 조정하기 (CSS 사용)
Divi 블로그 모듈의 요약문 길이를 조정하는 방법에는 여러 가지가 있습니다. 가장 간단하게 CSS로 조정하는 방법이 있습니다. Elegant Themes에서는 다음과 같은 코드를 제시하고 있습니다.
.et_pb_blog_grid .post-content p {
height: 100px;
overflow-y: hidden;
}
높이를 적당히 조정하여 요약글의 높이를 변경할 수 있습니다. 이 방법보다는 Limit text length to n lines using CSS(CSS를 사용하여 n개 라인으로 텍스 길이 제한하기)에 나와 있는 코드를 사용하면 더 좋은 효과를 얻을 수 있습니다.
.et_pb_blog_grid .post-content p {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: N; /* number of lines to show, 표시할 라인 수 */
line-height: X; /* fallback */
max-height: X*N; /* fallback */
}
위의 코드를 추가한 후에 확인해보면 요약문이 지정된 라인 개수에 맞게 표시됩니다.
위의 코드에서 N과 X 값을 적절히 조정합니다. 그러면 끝부분에 말줄임 기호(...)가 추가됩니다. 다만, IE 브라우저에서는 제대로 작동하지 않을 것입니다. IE 브라우저에서도 작동하도록 하려면 Hackya 사이트에서 제시하는 코드를 사용해볼 수 있습니다. (글자 수 오버시 처리방법 참고)
예시:
.et_pb_blog_grid .post-content p {
overflow: hidden;
position: relative;
line-height: 1.8em;
max-height: 9em;
text-align: justify;
margin-right: -1.8em;
padding-right: 1.8em;
}
.et_pb_blog_grid .post-content p:before {
content: '...';
position: absolute;
right: 1em;
bottom: 0;
}
.et_pb_blog_grid .post-content p:after {
content: '';
position: absolute;
right: 0;
width: 1em;
height: 1em;
margin-top: 0.2em;
}
인터넷 익스플로러(IE) 브라우저에서 테스트해보면 말줄임 기호(...)가 제대로 표시될 것입니다.