https://simadzu.hatenablog.com/entry/entry-description

はてなロゴ

はてなブログでは、記事を書くときに記事の概要が未入力だった場合、カテゴリーや月別アーカイブなどの記事の概要は、記事本文の冒頭から抜粋したものとなります。

その記事の概要が少し長かったので、JavaScript（jQuery）を使って指定文字数（100字）で省略（非表示に）してみました（三行におさめた）。

jQuery
<script>
document.addEventListener('DOMContentLoaded', function() {
if ($('.page-archive')[0]) {
    $('.entry-description').text(function() {
        var txt = $.trim($(this).text());
        var txt = txt.substr(0, 100);
        $(this).text(txt + '…');
    });
});
</script>

iwb.jp｜jQueryでたった5行の記述で長いテキストを「…」で省略する
 BLACKFLAG｜jQueryで文字列を特定の文字数でカットして末尾に「…」などを追加する方法

ただし、この方法だと省略した部分が一瞬見えてしまう。CSSで記事概要全部をあらかじめ非表示にしておいて、JavaScriptで表示させることもできますがどうしたものか。
また、文字数で省略すると、全角と半角が混ざっている文章では文末が揃わない...。

そこで発想を変えて、JavaScriptにこだわらずにCSSでなんとかしてみることにしました。
CSSのコードは次のとおりです（デザイン→カスタマイズ→フッタに入力します）。
※ デザインCSS（デザイン→カスタマイズ→デザインCSS）に入力する場合は、<style>と</style>の記述は不要です。

CSS
<style>
.page-archive .archive-entries .entry-description {
    font-size: 16px;
    line-height: 1.8;
    height: 5.4em;
    overflow: hidden;
    text-align: justify;
    word-break: break-all;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}
</style>

ポイントは、記事概要のテキストの高さを固定（height:5.4em）し、はみ出た部分を隠す（overflow:hidden）ということ。

また、テキストを両端揃え（text-align: justifyとword-break: break-all）に、末尾に「…」（三点リーダー）を表示（-webkit-line-clamp）しました。

JavaScriptに関するお知らせ｜【CSS】文章を両端揃えしたらword-break:break-allも設定しよう
 かけちまるblog｜【CSSのみ】指定行数を超えたテキストを非表示にする方法
 Lopan.jp｜3行めの末尾を三点リーダーで端折る

デザインテーマにもよりますが、カード型表示ではなく記事概要も表示する一覧表示であれば、このカスタマイズが使えるかもしれません。