Come faccio a visualizzare solo una parte di una stringa utilizzando css

Question

Desidero poter visualizzare una stringa di caratteri di massimo 10 caratteri. Se la stringa supera i 10 caratteri, vorrei aggiungere "..." alla fine.

Per esempio, se ho la stringa:

'helloworldmynameisryan' 

voglio che venga visualizzato in questo modo:

'helloworld...' 

Sto solo mostrando la mia stringa in un div come questo:

<div>DisplayMessage</div> 

Esiste una classe che potrei creare che si applicherebbe solo se la stringa fosse superiore a 10 caratteri?

Answer 1

Sfortunatamente non c'è un buon modo cross browser per farlo usando solo i CSS. 'overflow del testo' si basa sulla larghezza della stringa e non sulla lunghezza della stringa di cui hai bisogno.

È possibile utilizzare la proprietà .length di stringhe in javascript per raggiungere questo

function ellipsify (str) { 
    if (str.length > 10) { 
     return (str.substring(0, 10) + "..."); 
    } 
    else { 
     return str; 
    } 
} 

Spero che questo aiuti.

Answer 2

si chiama ellissi e si può usare su un elemento di blocco.

Tuttavia non funziona in Firefox e non è possibile impostare la larghezza esattamente a 10 caratteri poiché non è possibile specificare la larghezza in caratteri in css.

Se si desidera esattamente 10 caratteri e compatibilità con Firefox, sarà necessario utilizzare javascript o una soluzione lato server.

controllo puntini di sospensione: http://www.quirksmode.org/css/textoverflow.html

o provare questo:

.ellipsis{ 
white-space:nowrap; 
overflow:hidden; 
} 

.ellipsis:after{ 
    content:'...'; 
} 

plugin jQuery per questo:

http://devongovett.wordpress.com/2009/04/06/text-overflow-ellipsis-for-firefox-via-jquery/

Answer 3

Senza l'utilizzo di qualsiasi serverside script o javascript non è possibile fare questo.

Utilizzare la funzione seguente.

function LimitCharacter($data,$limit = 20) 
{ 
    if (strlen($data) > $limit) 
    { 
     $data = substr($data, 0, strrpos(substr($data, 0, $limit), ' ')) . '...'; 
     return $data; 
    } 
    else 
    { 
     return $data; 
    } 
} 

chiamata come LimitCharacter($yourString,5);

Javascript

var str = 'Some very long string'; 
if(str.length > 10) str = str.substring(0,10)+"..."; 

CSS

.limtiCharClass { 
    -o-text-overflow: ellipsis; /* Opera */ 
    text-overflow: ellipsis; /* IE, Safari (WebKit) */ 
    overflow:hidden;    /* don't show excess chars */ 
    white-space:nowrap;   /* force single line */ 
    width: 300px;     /* fixed width */ 
} 

Answer 4

Le ellissi è una funzione css3 e durante il test in diffe noleggia i browser ha problemi. Un rapido aggiramento sarebbe definire uno specifico con il div o span con overflow nascosto e quindi aggiungere un'immagine di sfondo che dice "..."

Answer 5

Secondo quirksmode, se v'è un testo lungo come

<div>11111111111111111111111111111111111111111111111111111111</div> 

Per concludere questo avete molti modi, utilizzare <wbr> tag come qui di seguito

<div>111111111111111111111111111<wbr>11111111111111111111111111111</div> 

Verrà visualizzato come
oppure utilizzare ­ anziché, l'output sarà

111111111111111111111- 
1111111111111111111111 

Oppure se si sta cercando la soluzione JS, utilizzare this.

Answer 6

Firefox ora supporta questo, è sufficiente assicurarsi che tutto ciò che si sta tentando di "troncare" abbia una formattazione a livello di blocco e una larghezza - che potrebbe essere il genitore.

.ellipsis { 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    display:block; 
    width : 100px; /* this could be defined on any parent */ 
}