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

HTML CSS Hazır Metin Kutusu


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>

Hiç yorum yok:

Yorum Gönder

Google Ads'te TBM Düşüren Bir Anahtar Kelime Stratejisi

Google Ads reklamlarının TBM maliyetleri enflasyon ve rekabetin etkisiyle giderek artmakta. Artık eskisi gibi ucuz CPC'lerle reklam yapm...