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;} .listRMo