How to change Blog Module Excerpt text length in the Divi theme

You might want to change Blog Module Excerpt text length in the Divi theme. For example, it's possible to display the exceprt of Divi Blog Modules in 5 lines.

To display Divi Blog Module excerpt in N lines, you can try the following CSS code (derived from "Limit text length to n lines using CSS"):

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

Now, the excerpts will be displayed in N lines. (Please change "N" and "X" and "X*N" as you wish.)

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

However, an ellipsis (...) will not appear in IE. If you want to display it, you can try the following code:

.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;
}

(Source: Hackya.com)

Now the ellipsis will appear in the Internet Explorer browser.


3s