Sto tentando di ottenere puntini di sospensione sul mio sito. Questo è il seguente codice HTML/CSS e non sembra funzionare.Ellissi HTML/CSS (...) Non funziona
CSS:
.oneline {
text-overflow:ellipsis;
white-space: nowrap;
width: 50px;
overflow: hidden;
}
HTML:
<div class="oneline">Testing 123 Testing 456 Testing 789</div>
Sulla base del initial post, siamo tutti assumendo l'ovvio, ma solo nel caso ...;)
<style type="text/css">
.oneline {
text-overflow : ellipsis;
white-space : nowrap;
width : 50px;
overflow : hidden;
}
</style>
<div class="oneline">Testing 123 Testing 456 Testing 789</div>
EDIT: La soluzione era di abbinare il paragrafo al div.
Sembra funzionare bene su jsfiddle.net - Ho lo stile in un foglio di stile separato. – Storm3y
Stai usando più fogli di stile? Forse hai un resetter che sta rovinando le tue regole di "overflow di testo" o di "overflow". Puoi provare ad aggiungere "! Important" dopo l'assegnazione delle regole per testare quella teoria. – AlienWebguy
L'assegnazione di position:absolute all'elemento da troncare avrà probabilmente effetti collaterali meno indesiderati pari a float:left.
Questo ha funzionato per me:
div {
position: absolute;
width: 70px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
Sei sicuro stai usando un browser compatibile con CSS3? –
Dai un'occhiata a questa risposta se sei su FF: http://stackoverflow.com/questions/4927257/text-overflowellipsis-in-firefox-4-and-ff5 – AlienWebguy
Mi sembra adatto http://jsfiddle.net/ ZBQnL/ – barro32