【89日目】関連記事をおしゃれに表示させたい！-3

<div id="bloglink">
<div id="bloglinkimg"><img src="/images/20201117001.webp" alt="テスト"></div>
<div id="bloglinktext">
<b>文末を「…」で終わらせる！「-webkit-line-clamp」の使い方</b><br>
<p>最新投稿などの文末を「…」（三点リーダ）で終わらせる方法、ご存じですか？「-webkit-line-clamp」を使えば簡単にできます！この記事では、line-clampをきれいに表示させるポイントを詳しく解説します！これさえ読めば、今日から「…」を実装できます！</p>
</div>
</div>

#bloglink{
max-width: 600px;
border: 1px solid silver;
border-radius: 20px;
display: grid;
grid-template-rows: auto;
grid-template-columns: 100px 1fr;
}
#bloglinkimg{
border: 1px solid silver;
padding:0;
border-bottom-left-radius: 20px;
border-top-left-radius: 20px;
}
#bloglinkimg img{
width: 100px;
height: 80px;
object-fit: cover;
margin:0;
border-bottom-left-radius: 20px;
border-top-left-radius: 20px;
border: none;
vertical-align: center;
vertical-align: top;
}
#bloglinktext{
font-size: 0.9em;
line-height: 1.2em;
padding: 0.5em;
height: 4em;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
}
#bloglinktext p{
text-indent: 0;
margin:0;
padding:0;
color: grey;
}