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

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

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

<div class="app">
  <a href="">Test Test Test Test Test Test</a>
</div>

Expandir fragmento

Debería cortarse alrededor de la cuarta "Prueba"

Jul 22 '13 10:07 ChristopherStrydom

text-overflow:ellipsis;solo funciona cuando se cumple lo siguiente:

El ancho del elemento debe estar restringido en px(píxeles). El ancho en %(porcentaje) no funcionará.
El elemento debe tener overflow:hiddeny white-space:nowrapestablecer.

La razón por la que tienes problemas aquí es porque widthtu aelemento no está restringido. Tiene una widthconfiguración, pero debido a que el elemento está configurado en display:inline(es decir, el valor predeterminado), lo ignora y nada más limita su ancho tampoco.

Puede solucionar este problema haciendo una de las siguientes cosas:

Establezca el elemento en display:inline-blocko display:block(probablemente lo primero, pero depende de sus necesidades de diseño).
Establezca uno de sus elementos contenedores en display:blocky asígnele a ese elemento un valor fijo widtho max-width.
Establezca el elemento en float:lefto float:right(probablemente lo primero, pero nuevamente, cualquiera debería tener el mismo efecto en lo que respecta a los puntos suspensivos).

Yo sugeriría display:inline-block, ya que esto tendrá el mínimo impacto colateral en su diseño; funciona de manera muy similar al display:inlineque se usa actualmente en lo que respecta al diseño, pero siéntete libre de experimentar con los otros puntos también; Intenté brindar la mayor cantidad de información posible para ayudarlo a comprender cómo interactúan estas cosas entre sí; Una gran parte de la comprensión de CSS consiste en comprender cómo funcionan juntos los distintos estilos.

Aquí tienes un fragmento de tu código, con un display:inline-blockañadido, para mostrar lo cerca que estabas.

.app a {
  height: 18px;
  width: 140px;
  padding: 0;
  overflow: hidden;
  position: relative;
  display: inline-block;
  margin: 0 5px 0 5px;
  text-align: center;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #000;
}

<div class="app">
  <a href="">Test Test Test Test Test Test</a>
</div>

Expandir fragmento

Referencias útiles:

https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow
https://developer.mozilla.org/en-US/docs/Web/CSS/white-space

Jul 22 '2013 08:07 Spudley

La respuesta aceptada es asombrosa. Sin embargo, aún puedes usar %ancho y lograr text-overflow: ellipsis. La solución es sencilla:

display: inline-block; /* for inline elements e.g. span, strong, em etc */
text-overflow: ellipsis;
width: calc(80%); /* The trick is here! */

Parece que cada vez que usas calc, el valor final se representa en píxeles absolutos, lo que en consecuencia se convierte 80%en algo así 800pxcomo un 1000pxcontenedor de ancho. Por lo tanto, en lugar de utilizar width: [YOUR PERCENT]%, utilice width: calc([YOUR PERCENT]%).

Oct 24 '2018 20:10 Supreme Dolphin

Entonces, si llega a esta pregunta porque tiene problemas para intentar que los puntos suspensivos funcionen dentro de un display: flexcontenedor, intente agregar min-width: 0al contenedor exterior que está desbordando su padre aunque ya le haya configurado a overflow: hiddeny vea cómo funciona para usted.

Más detalles y un ejemplo práctico sobre este codepen de aj-foster . En mi caso funcionó totalmente.

Dec 14 '2018 17:12 Herick

He tenido este problema y quería una solución que pudiera funcionar fácilmente con anchos dinámicos. La solución utiliza CSS Grid. Así es como se ve el código:

.parent {
  display: grid;
  grid-template-columns: auto 1fr;
}

.dynamic-width-child {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.fixed-width-child {
  white-space: nowrap;
}

<div class="parent">
  <div class="dynamic-width-child">
    iiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii asdfhlhlafh;lshd;flhsd;lhfaaaaaaaaaaaaaaaaaaaa
  </div>
  <div class="fixed-width-child">Why?-Zed</div>
</div>

Expandir fragmento

Feb 23 '2021 08:02 YulePale

Me enfrenté al mismo problema y parece que ninguna de las soluciones anteriores funciona para Safari. Para un navegador que no sea de Safari, esto funciona bien:

display: block; /* or in-line block according to your requirement */
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

Para Safari, este es el que me funciona. Tenga en cuenta que la consulta de medios para verificar si el navegador es Safari puede cambiar con el tiempo, así que simplemente modifique la consulta de medios si no le funciona. Con line-clampla propiedad, también sería posible tener varias líneas en la web con puntos suspensivos, consulte aquí .

// Media-query for Safari-only browser.
@media not all and (min-resolution: 0.001dpcm) {
  @media {
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    white-space: normal;
  }
}

Apr 30 '2020 03:04 alextanhongpin