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

368

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"

ChristopherStrydom
fuente
1
relacionado: Aplicar puntos suspensivos al texto multilínea
Michael Benjamin
FF only- si filterse aplica, los puntos suspensivos no se mostrarán. error abierto
vsync
1
Escribí una publicación sobre la resolución de problemas con text-overflow: bra gratisdeveloper.com/2017/07/29/why-wont-my-text-overflow
Fausto NA
1
en mi caso, eliminar la pantalla: flex del elemento ayudó
Eduard

Respuestas:

909

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:

Spudley
fuente
12
¿Qué sucede si no puedo usar el ancho establecido debido al diseño receptivo?
SearchForKnowledge
55
Tenga en cuenta que max-width también funciona. Esto me ayudó porque tenía un ícono que tenía que abrazar el final del texto, independientemente del ancho de su espacio. (De lo contrario, el icono estaría flotando hacia la derecha si el texto no ocupara todo el ancho del tramo)
Kevin
2
Nota: en white-space: nowraprealidad no es necesario. Todavía podemos ver las elipses incluso sin ella. Para varias líneas text-overflow, vea este SO
rostro el
24
No estoy seguro de si se trata de un cambio reciente o no, pero en Chrome 50 (beta) no tiene que establecer el ancho en un valor de px: "100%" también funciona. white-space: nowrapSin embargo, es obligatorio.
Thdoan
13
No es necesario establecer un fijo widthen absoluto. Todo lo que necesita hacer es configurar un white-space: nowrap;y funciona bien.
adamj
37

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]%).

Delfín Supremo
fuente
17

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.

Herick
fuente
2
Gran solución: también es la única publicada aquí que funciona para un position: stickyelemento dentro de un display: flexcontenedor.
James Dinsdale
2
Creo que debería incluirse en la respuesta seleccionada. Resolvió mi problema. ¡Gracias!
j0nd0n7
1
Usted señor es un genio.
Nathan Osman
1
gracias hombre, salvó el día
Paraguas
7

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

Tim Vermaelen
fuente
5

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

santhoshkumar
fuente
5

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;
}
Manoj Selvin
fuente
2

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

manifestación

Bhojendra Rauniyar
fuente
Acabo de comprobar y se está cortando: /
SearchForKnowledge
2

Simplemente agrega una línea css:

.app a {
   display: inline-block;
}
Sanjib Debnath
fuente
1

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>

Penny Liu
fuente
1

Debe contener

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

NO DEBE contener

display: inline

Debería contener

position: sticky
NVRM
fuente
0

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

Shabbir Lakdawala
fuente
0

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>

T04435
fuente
0

Este es el código que permite que:

overflow: hidden;
text-overflow: ellipsis;

desbordamiento: se requiere oculto

Max Alexander Hanna
fuente
0

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;
  }
}
alextanhongpin
fuente
0

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.

nemkin
fuente
-1

Escriba esto en su regla CSS.

display: block; /* or in-line block according to your requirement */
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
Siraj Alam
fuente
También puede consultar esto, jsfiddle.net/ManiAnand/5v6pfy9w
Mani Abi Anand
Si se puede especificar el ancho, mi respuesta no es incorrecta. Todo lo que acabas de agregar bloque de pantalla en mi respuesta, he escrito un fragmento, no todos los códigos, por lo que se pueden agregar otras cosas, ¡pero no tengo nada que ver con el problema! ¿Puede especificar cómo mi respuesta no es correcta?
Siraj Alam
1
El ancho debe especificarse, así como la pantalla. Si el ancho es un porcentaje o no especificado y no se establece en unidades duras, el desbordamiento no estará limitado y no funcionará. Ver la respuesta aceptada.
jlesse
El ancho ya ha sido establecido por el op. Le di un fragmento para agregar sus códigos
Siraj Alam