UFUK   UÇAR

Merhaba,

Bir iş için lazım oldu.

Özellikle responsive tasarımlardaki çirkin görüntüyü engellemek için javascript ile metin sınırlaması yapıyordum.

Css ile bunun yapılabileceğini de öğrendim.

Güzel bir özellik. Kullanılabilir diye burada paylaşıyorum.

Öncelikle şöyle bir yapımız olsun.
 

        <div class="container">
       
            <p>
                It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.  The point of using Lorem Ipsum is that it has a more-or-less normal   distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. 
                Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites 
            </p>
            
        </div>

Biraz şekil verelim.

.container  {
            width: 500px;
            height: 100px;
            background-color: #f1f1f1
        }

Şimdi gelelim asıl sorunumuzu çözen yere.
 

    
        .container p  {
            overflow: hidden;

            display: -webkit-box;

            -webkit-line-clamp:  3;   // 3 satırda sınırlıyoruz. 

             -webkit-box-orient: vertical;  

        }

Evet, hepsi bu kadar..