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

No sé por qué este simple CSS no está funcionando ...

.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>

Debería cortar alrededor de la 4ta "Prueba"

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 está teniendo problemas aquí es porque el widthde su aelemento no está limitado. 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 esto haciendo uno de los siguientes:

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

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 está usando actualmente en lo que respecta al diseño, pero siéntase libre de experimentar también con los otros puntos; He tratado de darle la mayor cantidad de información posible para ayudarlo a comprender cómo interactúan estas cosas juntas; Una gran parte de la comprensión de CSS se trata de comprender cómo funcionan varios estilos juntos.

Aquí hay un fragmento con su código, con un display:inline-blockagregado, para mostrar qué tan cerca estaba.

.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>

Referencias útiles:

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

La respuesta aceptada es asombrosa. Sin embargo, aún puede usar %ancho y alcanzar text-overflow: ellipsis. La solución es simple:

display: inline-block; /* for em, a, span, etc (inline by default) */
text-overflow: ellipsis;
width: calc (80%); /* The trick is here! */

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

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 externo que desborda a su padre a pesar de que ya lo configuró overflow: hiddeny vea cómo funciona eso para usted.

Más detalles y un ejemplo de trabajo sobre este codepen por aj-foster . Totalmente hizo el truco en mi caso.

También asegúrese de que word-wrapesté configurado en normal para IE10 y a continuación.

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 "ajuste de texto". Sin embargo, la configuración de wordWrap siempre es efectiva en Windows Internet Explorer porque Internet Explorer no admite la propiedad de "ajuste de texto".

Por lo tanto, en mi caso, word-wrapse configuró como palabra de interrupción (¿heredada o por defecto?), Lo que hizo text-overflowque funcionara en FF y Chrome, pero no en IE.

ms información sobre la propiedad de ajuste de línea

anchor, span... las etiquetas son elementos en línea de forma predeterminada, en caso de elementos en línea, la widthpropiedad no funciona. Entonces debes convertir tu elemento en uno inline-blocko más block levelelementos

Incluya las cuatro líneas escritas después de la información para que funcionen los puntos suspensivos

.app a
{
 color: #fff;
 font: bold 15px/18px Arial;
 height: 18px;
 margin: 0 5px 0 5px;
 padding: 0;
 position: relative;
 text-align: center;
 text-decoration: none;
 width: 140px;

 /* 
 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;
}

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

manifestación

Simplemente agrega una línea css:

.app a {
   display: inline-block;
}

En Bootstrap 4 , puede agregar una .text-truncateclase para truncar el texto con puntos suspensivos.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

<!-- Inline level -->
<span class="d-inline-block text-truncate" style="max-width: 250px;">
  The quick brown fox jumps over the lazy dog.
</span>

Debe contener

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

NO DEBE contener

display: inline

Debería contener

position: sticky

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

Tuve que hacer elipse de descripciones largas (tomar solo un carril) mientras respondía, por lo que mi solución fue dejar que el texto se ajustara (en lugar de white-space: nowrap) y en lugar de ancho fijo agregué altura fija:

span {
  display: inline-block;
  line-height: 1rem;
  height: 1rem;
  overflow: hidden;
  // OPTIONAL LINES
  width: 75%;
  background: green;
  //  white-space: normal; default
}

<span>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi quia quod reprehenderit saepe sit. Animi deleniti distinctio dolorum iste molestias reiciendis saepe. Ea eius ex, ipsam iusto laudantium natus obcaecati quas rem repellat temporibus! A alias at, atque deserunt dignissimos dolor earum, eligendi eveniet exercitationem natus non, odit sint sit tempore voluptate. Commodi culpa ex facere id minima nihil nulla omnis praesentium quasi quia quibusdam recusandae repellat sequi ullam, voluptates. Aliquam commodi debitis delectus magnam nulla, omnis sequi sint unde voluptas voluptatum. Adipisci aliquam deserunt dolor enim facilis libero, maxime molestias, nemo neque non nostrum placeat reprehenderit, rerum ullam vel? A atque autem consectetur cum, doloremque doloribus fugiat hic id iste nemo nesciunt officia quaerat quibusdam quidem quisquam similique sit tempora vel. Accusamus aspernatur at au
</span>

Este es el código que permite que:

overflow: hidden;
text-overflow: ellipsis;

desbordamiento: se requiere oculto

Me enfrenté al mismo problema y parece que ninguna de las soluciones anteriores funciona para Safari. Para el navegador que no es 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, por lo que solo debe modificar la consulta de medios si no funciona para usted. Con la line-clamppropiedad, también sería posible tener múltiples líneas en la web con puntos suspensivos, ver 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;
  }
}

https://stackoverflow.com/a/53784508/5626747

No puedo comentar debido a la reputación, así que estoy haciendo otra respuesta:

En este caso, también tendrá que eliminar la display: block;propiedad generalmente sugerida del elemento en el que configuró text-overflow: ellipsis;, o se cortará sin el ... al final.

Escriba esto en su regla CSS.

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