Diviテーマのブログモジュールで要約（Excerpt）の長さを調整する

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

上記のコードを追加した後確認してみる要約が指定されたライン数に合わせて表示されます。

上記のコードでは、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）ブラウザでテストしてみると言って減らす記号（...）が正しく表示されます。