Ho bisogno di un overflow per troncare da sinistra, con le ellissi

In breve, ho un campo in cui le cifre più a destra sono più significative. (Naturalmente, questo campo proviene dai sistemi dei nostri affiliati, sulla base delle loro chiavi primarie, quindi la maggior parte delle cifre di sinistra cambia solo una volta per epoca!)Ho bisogno di un overflow per troncare da sinistra, con le ellissi

Tutti sanno CSS fornisce un troncamento destra con 'text-overflow: puntini di sospensione;' . Come (senza aggiungere codice al server per preparare quel campo tramite la chirurgia delle stringhe) tronchiamo il campo a SINISTRA e mettiamo gli "..." a sinistra?

(CSS3 va bene.)

fonte

2012-10-06 Phlip

Correlato: http://stackoverflow.com/questions/9793473/text-overflow-ellipsis-on-left-side –

Ho aggiunto un violino per mostrare il problema e proporre una soluzione molto hacker: http: // jsfiddle. net/ryanwheale/2cyVX/ –

questo tipo di caso limite è la ragione per cui gli sviluppatori di Firefox hanno rifiutato di implementare i puntini di sospensione fino FFv7, nonostante ottenere così tanto critiche per esso. Lo hanno implementato alla fine, ma le specifiche hanno molti buchi attorno ai bordi. Se stai facendo qualcosa di più del semplice ... alla fine di una scatola, troverai dei problemi. – Spudley

cercano di usare questo trucco:

HTML

<p class="ellipsis">ert3452654546</p>

CSS

.ellipsis 
    { 
     overflow:hidden; 
     width: 60px; 
     direction:rtl; 
     margin-left:15px; 
     white-space: nowrap; 
    } 

.ellipsis:after{position:absolute;left:0px; content:"...";}

FIDDLE

fonte

2012-10-06 17:54:55 khomyakoshka

+1: questa è stata l'unica soluzione che ho visto funzionare correttamente in Chrome. Buon lavoro! –

L'elemento genitore dell'elemento ': after' deve avere' position: relative' o 'absolute'. Oppure ottieni questo: http://jsfiddle.net/ekLpfy08/ –

Non c'è bisogno di pseudo-elementi 'dopo'. Puoi aggiungere 'text overflow: ellipsis' invece di' :: after'. I punti appariranno a sinistra, poiché 'direction' è' rtl'. – kakaja

non sono in grado di provarlo ora, ma sono abbastanza certo che l'aggiunta di

direction: rtl;

farà il risultato previsto.

fonte

2012-10-06 16:58:36 Tchoupi

In effetti mette i puntini di sospensione a sinistra, tuttavia, sembra esserci un bug in Chrome in cui i puntini di sospensione vengono semplicemente anteposti al testo, ma si continua a vedere il bordo sinistro (all'inizio) del testo anziché la fine. Vedi fiddle: http://jsfiddle.net/ryanwheale/2cyVX/ –

@RyanWheale, ora sta accadendo in IE ... Ma non in Chrome più AFAIK –

Grazie, funziona all'interno di un '' in un '

': http://i.imgur.com/aPrBJmc.png – Dorian

È possibile utilizzare una classe CSS per avere questo tipo di comportamento come:

.responsive-text { 
    display: inline-block; 
    vertical-align: middle; 
    overflow: hidden; 
    white-space: nowrap; 
    text-overflow: ellipsis; 
    direction: rtl; 
    width: 100%; 
}

Hai solo per definire la dimensione del contenitore di questo testo e ogni volta che il testo interno non compilare solo una riga, sta per troncare il testo e aggiunge ... all'inizio.

fonte

2018-02-14 13:21:49 Yoan

Problemi correlati

Ho bisogno di un overflow per troncare da sinistra, con le ellissi

risposta

Problemi correlati