2010-10-11 2 views
11

Possibili duplicati:
Is it possible to implement the effect of overflow:ellipsis with javascript or css?
How do I indicate long text into a smaller fixed column with CSS?CSS: Come limitare testo mostrato con l'utilizzo di "..."

voglio tagliare il testo se è superiore a 300px di larghezza con "..."

Per esempio, se ho avuto:

<ul> 
<li>this is greater than 300px, than only display as much of the text that is 300px wide and then replace the remaining text with "..."</li> 
<li>short, don't trim</li> 
</ul> 

visualizzerà come:

this is greater than 300px, than only ... 
short, don't trim 
|----------- 300px wide ----------------| 

Come dovrei farlo con i CSS/HTML?

+1

possibile duplicato [E 'possibile implementare l'effetto di overflow:? Ellissi con javascript o CSS] (http://stackoverflow.com/questions/2995656/) e http://stackoverflow.com/questions/3067696 e http://stackoverflow.com/questions/802175/ e http://stackoverflow.com/questions/486563/ man I Sono stanco di questa domanda –

+0

Ho provato quanto sopra e non ha funzionato usando ** puro ** CSS/HTML. Ha funzionato solo se ho usato JQuery e non voglio usare JQuery. – Jason

+0

** Questo potrebbe essere un duplicato, MA non ho trovato una risposta CSS/HTML pura che FUNZIONA. Ci sono stati suggerimenti per usare codice come collegato ma quel codice NON funziona. ** http://stackoverflow.com/questions/2108740/how-do-i-indicate-long-text-into-a-smaller-fixed- column-with-css/2109035 # 2109035 – Jason

risposta

11
+0

Ho provato quanto sopra e non ha funzionato usando ** puro ** CSS/HTML. Ha funzionato solo se ho usato JQuery e non voglio usare JQuery. – Jason

+0

@Jason È possibile implementarlo utilizzando JS "nativo", ma è più breve con jQuery –

+0

Non sto cercando una soluzione JS, sto cercando una soluzione che utilizza puro CSS/HTML – Jason