CSS Elipsis de desbordamiento de texto no muestra

Question

Tengo un div con un contenido interno que necesito para tener una elipsis cuando se desborda. He hecho esto muchas veces sobre otros elementos, pero por alguna razón esto no se está comportando como se esperaba.

Además, dejé white-space:nowrap; a propósito porque el contenido no pasa a la siguiente línea dentro del lapso, como resultado, solo veo 2-3 palabras antes de que comience la elipsis. Me gustaría que el texto abarque toda la altura del contenedor padre y luego tener los puntos suspensivos de inicio para el contenido que existe más allá de esos límites.

Aquí es una demostración de trabajo: 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> 

Puede alguien por favor ayuda. Necesito mostrar tanto texto como sea posible dentro del lapso indicado en rojo mientras que tiene una elipsis cuando el contenido de texto desborda el contenedor ...

Gracias de antemano

Answer 1

no se puede aplicar a text-overflow: ellipsis Elementos en línea (Span), que se puede utilizar con elementos de bloque solamente (div)

y también utilizar white-space:nowrap; cuando se utiliza text-overflow: ellipsis;

comprobar esto, he convertido su lapso interno a dIV, sólo para la prueba de concepto

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

no sé por qué se ha utilizado palmo, pero según su lógica se puede hacer chang es como he sugerido

Actualización:

alguien va a pensar que en la pregunta si pongo white-space: nowrap; al elemento SPAN entonces el text-overflow: ellipsis: está trabajando así que puede ser que me equivoque, pero no es el caso, ya que pregunta ha utilizado float: left en la etiqueta span, lo que significa que la etiqueta span se convertirá en un bloque de cuadro y funcionará como un elemento de nivel de bloque normal, lo cual también es incorrecto porque si necesita el comportamiento del elemento block use un elemento de nivel de bloque

Referencia:

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

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

Answer 2

Añadir white-space:nowrap; a su div .inner.

Answer 3

añadir lo siguiente:

white-space:nowrap; 

a .flow-elemento .long

a continuación las obras de desbordamiento-ellispsis.

Answer 4

Creo que el problema se debe a tener text-align: center;