2012-09-26 9 views
5

voglio avere tutto il testo si chiude con '...' ma funziona solo per il div interno:text-overflow: non Ellipsis lavorare in un div contenente un div in Chrome

<div>Test test test test test test<div>asdasdasdasdasd</div></div>​ 

div { 
    border: solid 2px blue; 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    width: 40px; 
}​ 

http://jsfiddle.net/JU8Up/

c'è qualche soluzione in modo che anche il testo contenuto nel div esterno ottenga il '...'?

Edit: sembra proprio un problema di cromo, ma ancora la correzione nella risposta qui sotto funziona

+1

Vedo i puntini di sospensione sia per il testo esterno che per quello interno in FF (più recente). Con quale browser stai testando? – techfoobar

+1

Vedo puntini di sospensione su entrambi in FF ma solo nella parte interna di Chrome. –

+0

right stavo usando chrome, modificato l'articolo di conseguenza –

risposta

4

Funziona aggiungendo float: left; al CSS div, ma senza alcuna ulteriore contesto non posso commentare ciò che lato- effetti che possono avere nella tua implementazione.

Example here.

+0

Visto questa proprietà per la prima volta, solo curioso, come è utile? – freebird

+0

Quale proprietà, 'float: left'? Oppure "overflow del testo: ellissi"? –

+0

overflow di testo: puntini di sospensione – freebird

0

Dai un'occhiata a questo link. potrebbe essere di aiuto.
http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_text-overflow

+3

[W3Schools non è una fonte affidabile] (http://w3fools.com/) - per provare le cose velocemente nel browser, [JSFiddle] (http://jsfiddle.net/) è molto meglio, e per la documentazione generale e l'apprendimento, raccomando [Mozilla Developer Network] (https: //developer.mozilla.org/en-US/). –

+2

ok. ma imparo molte cose di base da w3school. –

Problemi correlati