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

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.Mostra punti sulla linea netta di un testo se si rompe con i CSS

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

fonte

2016-02-01 Yulian

vedere http://www.mobify.com/blog/multiline-ellipsis-in-pure-css/ – fcalderan

Lei ha affermato che 'white-space: nowrap;' così come il testo sarebbe avvolto in seconda linea? E inoltre - non è possibile in css, dovrai usare javascript, questo ti interessa? Ci sono soluzioni senza js, ma avrai problemi ad inserire punti dopo il testo perché css non sa quanto è lungo il tuo testo. –

http://stackoverflow.com/questions/15909489/text-overflow-ellipsis-on-two-lines potrebbe aiutarti. –

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>

fonte

2016-02-01 09:51:59

Esiste un'alternativa al line-clamp per i browser non Webkit? – Yulian

@Yulian Sembra che solo i browser Webkit lo supportino. L'unico modo in cui posso pensare a una soluzione cross-browser per il testo dinamico è farlo in JS. –

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.

fonte

2016-02-01 09:51:40 Sphinx

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

risposta

Problemi correlati