Mostra punti sulla linea netta di un testo se si rompe con i CSS

Question

Voglio mostrare i punti sull'n-en (nel mio caso 2a) riga di un testo se si rompe. Ho visto le risposte this e this ma non sono riuscito a far funzionare la cosa nel mio caso.

Ecco uno fiddle.

.overme { 
    width: 300px; 
    height: 60px; 
    line-height: 30px; 
    overflow:hidden; 
    font-size: 30px; 
    color: red; 
    background: #333; 
    /*The problematic part is below*/ 
    white-space:nowrap; 
    text-overflow: ellipsis; 
} 

Answer 1

Soluzione 1:

Utilizzare il webkit solo -webkit-line-clamp immobili per 2 linee.

.overme { 
 
    width: 300px; 
 
    height: 60px; 
 
    line-height: 30px; 
 
    overflow:hidden; 
 
    font-size: 30px; 
 
    color: red; 
 
    background: #333; 
 

 
    /*The problematic part is below*/ 
 
    white-space:nowrap; 
 
    text-overflow: ellipsis; 
 
} 
 
    
 
.overme { 
 
    white-space: normal; 
 
    display: -webkit-box; 
 
    -webkit-line-clamp: 2; 
 
    -webkit-box-orient: vertical; 
 
}

<div class="overme"> 
 
    how much wood can a woodchuck chuck if a woodchuck could chuck wood? 
 
</div>

---

Soluzione 2

Usare un pseudo elemento :after, allineato con il basso a destra. Funziona solo se il tuo testo è statico e conosciuti in anticipo che traboccherà il contenitore.

.overme { 
 
    width: 300px; 
 
    height: 60px; 
 
    line-height: 30px; 
 
    overflow:hidden; 
 
    font-size: 30px; 
 
    color: red; 
 
    background: #333; 
 
    position: relative; 
 
} 
 
    
 
.overme:after { 
 
    display: inline-block; 
 
    position: absolute; 
 
    right: 0; 
 
    bottom: 0; 
 
    content: '...'; 
 
}

<div class="overme"> 
 
    how much wood can a woodchuck chuck if a woodchuck could chuck wood? 
 
</div>

---

Soluzione 3 - Cross-Browser

Questo JS soluzione confronta l'altezza del contenitore principale (div) contro il testo contenuto. Se l'altezza del testo è maggiore dell'altezza del genitore, allora una classe viene aggiunta al genitore.

Per verificarlo, eliminare del testo in modo che si adatti a tutti nel genitore. Non vedrai più i punti.

$(".overme").each(function() { 
 
    var $elem = $(this); 
 
    $elem.addClass($elem[0].scrollHeight > $elem.height() ? 'overflows' : null); 
 
});

.overme { 
 
    width: 300px; 
 
    height: 60px; 
 
    line-height: 30px; 
 
    overflow:hidden; 
 
    font-size: 30px; 
 
    color: red; 
 
    background: #333; 
 
    position: relative; 
 
} 
 
    
 
.overme.overflows:after { 
 
    display: inline-block; 
 
    background: #333; 
 
    position: absolute; 
 
    right: 2px; 
 
    bottom: 0; 
 
    content: '...'; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="overme"> 
 
    how much wood can a woodchuck chuck if a woodchuck could chuck wood? 
 
</div>

Answer 2

un'occhiata a questo post CSS Tricks, mi ha aiutato con questo e introduce la linea di serraggio con i vari modi per raggiungere i risultati che cercano.