Divi 테마의 블로그 모듈에서 요약문(Excerpt) 길이 조정하기

0

워드프레스 Divi 테마에서 블로그 모듈로 블로그 글을 표시할 경우 요약문(Excerpt) 길이가 270로 설정되어 한글 사이트에서 요약문이 지나치게 길게 보일 수 있습니다.

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 */
}

위의 코드를 추가한 후에 확인해보면 요약문이 지정된 라인 개수에 맞게 표시됩니다.

Divi 테마 블로그 모듈의 요약문 길이 조정하기

위의 코드에서 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) 브라우저에서 테스트해보면 말줄임 기호(…)가 제대로 표시될 것입니다.

*일부 글에 제휴링크가 포함될 수 있으며, 기부를 통해 블로그 운영을 후원하실 수 있습니다.

Related Posts

댓글 남기기