Desbordamiento de texto CSS: puntos suspensivos; ¿no funciona?

No sé por qué este simple CSS no funciona …

.app a { height: 18px; width: 140px; padding: 0; overflow: hidden; position: relative; margin: 0 5px 0 5px; font: bold 15px/18px Arial; text-align: center; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; color: #FFF; } 
 

text-overflow:ellipsis; solo funciona cuando los siguientes son verdaderos:

  • El ancho del elemento debe estar restringido en px (píxeles). El ancho en % (porcentaje) no funcionará.
  • El elemento debe tener overflow:hidden y white-space:nowrap set white-space:nowrap .

La razón por la que está teniendo problemas aquí es porque el width de su elemento a no está restringido. Usted tiene una configuración de width , pero debido a que el elemento está configurado para display:inline (es decir, el valor predeterminado) lo está ignorando, y nada más está limitando su ancho tampoco.

Puede solucionar esto haciendo uno de los siguientes:

  • Configure el elemento para display:inline-block o display:block (probablemente el primero, pero depende de las necesidades de su diseño).
  • Establezca uno de sus elementos de contenedor para display:block y otorgue a ese elemento un width fijo o width max-width .
  • Configure el elemento para que float:left o float:right (probablemente el primero, pero, una vez más, cualquiera de los dos debería tener el mismo efecto en lo que se refiere a la elipsis).

Sugeriría display:inline-block , ya que esto tendrá el mínimo impacto colateral en su diseño; funciona en gran medida como la display:inline que está utilizando actualmente en lo que respecta al diseño, pero también puede experimentar con los otros puntos; Intenté brindar toda la información posible para ayudarlo a comprender cómo estas cosas interactúan juntas; una gran parte de la comprensión de CSS se trata de entender cómo funcionan varios estilos en conjunto.

Espero que ayude.

Aquí hay un jsfiddle con su código, con una display:inline-block agregado, para mostrar qué tan cerca estuvo.

Referencias útiles:

También asegúrese de word-wrap ajuste de word-wrap esté configurado en normal para IE10 y abajo.

Los estándares a los que se hace referencia a continuación definen el comportamiento de esta propiedad como dependiente de la configuración de la propiedad “text-wrap”. Sin embargo, la configuración de WordWrap siempre es efectiva en Windows Internet Explorer porque Internet Explorer no es compatible con la propiedad “text-wrap”.

Por lo tanto, en mi caso, el ajuste de word-wrap se configuró en palabra de ruptura (¿heredado o de manera predeterminada?), Lo que hace que text-overflow funcione en FF y Chrome, pero no en IE.

ms información sobre la propiedad de ajuste de palabras

anchor , span … las tags son elementos en línea por defecto, en el caso de la propiedad de width elementos en línea no funciona. Por lo tanto, debe convertir su elemento inline-block o block level elementos de block level

Agregar display: block; o display: inline-block; a su #User_Apps_Content .DLD_App a

manifestación

Incluye las cuatro líneas escritas después de que la información de puntos suspensivos funcione

 .app a { height: 18px; width: 140px; padding: 0; position: relative; margin: 0 5px 0 5px; font: bold 15px/18px Arial; text-align: center; text-decoration: none; color: #FFF; /* **Note:**The Below 4 Lines are necessary for ellipsis to work */ display: block; // change it as per your requirement overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } 

Simplemente agrega una línea css:

 .app a { display: inline-block; } 

También puede agregar flotación: izquierda; dentro de esta clase #User_Apps_Content .DLD_App a

Escribe esto en tu regla css.

 overflow: hidden; white-space: nowrap; text-overflow: ellipsis;