Sidebar İçin Özet Metin Kutusu(Elipsisli-3 noktalı) HTML-CSS

Haber sitelerinde, ya da blog sayfalarının sidebar bölümünde kullanabileceğiniz metin kutusu. Genelde bir yazının özet kısmını göstermek için kullanılır. Eklediğinizi yazıyı belirli bir satıra kadar gösterir. Gerisini 3 nokta şeklinde kısaltır. Koddaki line-clamp özelliğini değiştirerek satır sayısını istediğiniz gibi ayarlayabilirsiniz. Kodlar şu şekildedir.

<style>

.listWrp{background:#f2f2f2;padding:2%;border: solid 1px #f2f2f2;border-radius:.8rem;-moz-border-radius:.8rem;-webkit-border-radius:.8rem;-o-border-radius:.8rem;max-width:40%;color:#717171;font-family:Arial;}

.listCont{border-left:solid 3px #ff0000;padding:0 0 0 3%;display:block;position:relative;font-size:.9rem;text-align:justify;  }

.listInd{position:absolute;top:5%;left:-.38rem;padding:.3rem;background-color:#ff0000;z-index:10;}

.listTitle{color:#555;margin:1% 0;font-size:1.2rem;}

.listTxt{text-overflow: ellipsis;display: -webkit-box;  -webkit-line-clamp: 8;  -webkit-box-orient: vertical;overflow:hidden;}

.listRMore{max-width:4rem;text-align:center;float:right;font-size:.7rem;color:#fff;font-weight:bold;padding:.5rem;background-color:#f00;border-radius:.3rem;-moz-border-radius:.3rem;-webkit-border-radius:.3rem;-o-border-radius:.3rem;line-height:.8rem;height:.8rem;display:block;cursor:pointer;text-decoration:none;}

.lstClear{clear:both;}

</style>

<div class="listWrp">

<div class="lstItem">

        <div class="listCont">

        <div class="listInd"></div>

        <h3 class="listTitle">Lorem ipsum dolor</h3>

          <div class="listTxt">

          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

        </div>

        <a href="#" class="listRMore">Read More</a>

    </div>

    <div class="lstClear"></div>

</div>