Ellipsis víceřádkový

by Petr Haluza

HTML

<div class="box"> 
        <div class="container"> 
            <div class="text-2"> 
                This is the first card and this one  
                and this one truncates upto two lines. 
            </div> 
        </div> 
        <div class="container"> 
            <div class="text-3"> 
                This is the first card and this one  
                and this one truncates upto three  
                lines. 
            </div> 
        </div> 
    </div>

CSS

.box{ 
            display: flex; 
            flex-direction: row; 
        } 
        .container { 
            width: 12rem; 
            padding: 1rem; 
            background-color: lightgreen; 
        } 
          
        .text-2 { 
            display: -webkit-box; 
            -webkit-box-orient: vertical; 
            -webkit-line-clamp: 2; 
            overflow: hidden; 
            text-overflow: ellipsis; 
        } 
        .text-3 { 
            display: -webkit-box; 
            -webkit-box-orient: vertical; 
            -webkit-line-clamp: 3; 
            overflow: hidden; 
            text-overflow: ellipsis; 
        }