Non si visualizza l'allipide di testo CSS

Question

Ho un div con alcuni contenuti interni che ho bisogno di avere i puntini di sospensione quando overflow. L'ho fatto molte volte su altri elementi, ma per qualche motivo questo non si comporta come previsto.

Inoltre, ho lasciato fuori lo scopo white-space:nowrap; perché il contenuto non si interrompe alla riga successiva all'interno dello span, di conseguenza vedo solo 2-3 parole prima dell'inizio dei puntini di sospensione. Vorrei che il testo si estendesse per l'intera altezza del contenitore padre, quindi i puntini di sospensione iniziano per il contenuto che esiste oltre questi limiti.

Ecco una demo funzionante: http://jsfiddle.net/sadmicrowave/DhkSA/

CSS:

.flow-element{ 
    position:absolute; 
    font-size:12px; 
    text-align:center; 
    width:75px; 
    height:75px; 
    line-height:70px; 
    border:1px solid #ccc; 
} 

.flow-element .inner{ 
    position:absolute; 
    width:80%; 
    height:80%; 
    border:1px solid blue; 
    top:0px; 
    bottom:0px; 
    left:0px; 
    right:0px; 
    margin:auto; 
    text-align:center; 
} 

.flow-element .long{ 
    float:left; 
    height:50px; 
    width:100%; 
    line-height:12px; 
    border:1px solid red; 
    text-overflow:ellipsis; 
    overflow:hidden; 
} 

HTML:

<a class='flow-element' style='top:100px; left:50px;'> 
    <div class='inner'> 
    <span class='long'>Box 1 and some other content that should wrap and do some other stuff</span> 
    </div> 
</a> 

Per favore qualcuno può aiutare. Ho bisogno di visualizzare la quantità di testo possibile entro l'arco rosso delineato, pur avendo i puntini di sospensione quando il contenuto testo supera il contenitore ...

Grazie in anticipo

Answer 1

non è possibile applicare text-overflow: ellipsis inline elementi (span), può essere utilizzato con elementi di blocco solo (div)

e anche l'uso white-space:nowrap; quando si utilizza text-overflow: ellipsis;

controllo questo, ho convertito il vostro arco interno al div, solo per prova di concetto

http://jsfiddle.net/3CgcH/5/

non so il motivo per cui è stata utilizzata arco, ma secondo la vostra logica che si può fare chang es, come ho suggerito

Aggiornamento:

qualcuno penserà che la questione se metto white-space: nowrap; per attraversare elemento poi il text-overflow: ellipsis: sta lavorando in modo può essere mi sbaglio, ma non è il caso perché interrogante ha utilizzato float: left nel tag span, il che significa che il tag span verrà convertito in un blocco di riquadri e funzionerà come un normale elemento a livello di blocco, operazione anch'essa errata perché se è necessario il comportamento dell'elemento di blocco, utilizzare un elemento a livello di blocco

Riferimento:

http://www.w3.org/TR/CSS2/visuren.html#propdef-float

http://dev.w3.org/csswg/css3-ui/#text-overflow

Answer 2

Aggiungi white-space:nowrap; al div .inner.

Answer 3

Aggiungi questa:

white-space:nowrap; 

a .flow elemento .long

poi le opere di overflow-ellispsis.

Answer 4

Penso che troverete che il problema è causato dall'avere allineato il testo: centro;