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

truncar texto con puntos suspensivos

Question

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;
  font: bold 15px/18px Arial;
  text-align: center;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #FFF;
}

<div class="app">
  <img src=""></img>
  <h1></h1>
  <a href=""></a>
</div>

Answer 1

Escribe esto en tu regla css.

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

Answer 2

Añadir display: block; o display: inline-block; a su #User_Apps_Content .DLD_App a

demo

Answer 3

En bootstrap 4 , puede agregar una clase .text-truncate para truncar el texto con puntos suspensivos.

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

Answer 4

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

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

    }

Answer 5

La respuesta aceptada es impresionante. Sin embargo, todavía puede utilizar % ancho y obtener 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% - 0px); /* killer line hahaha */

Aparece cada vez que usas calc , el valor final se representa en píxeles absolutos, lo que en consecuencia convierte 80% - 0px a algo así como 800px para un 1000px 1000px 1000px ancho. Por lo tanto, en lugar de usar el width: [YOUR PERCENT]% , use width: calc([YOUR PERCENT]% - 0px) .

Answer 6

Simplemente agregue una línea css:

.app a {
   display: inline-block;
}

Answer 7

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

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 admite la propiedad "text-wrap".

Por lo tanto, en mi caso, el ajuste de word-wrap se configuró como una palabra clave (¿heredada o por defecto?), Lo que causó que text-overflow funcione en FF y Chrome, pero no en IE.

ms info en la propiedad de ajuste de palabra

Answer 8

También puedes añadir float: left; dentro de esta clase #User_Apps_Content .DLD_App a

Answer 9

anchor etiquetas anchor , span ... son elementos en línea de forma predeterminada, en caso de que los elementos en línea, la propiedad de width no funcione. Así que tienes que convertir tu elemento a elementos de block level inline-block o block level

Answer 10

text-overflow:ellipsis; Solo funciona cuando lo siguiente es cierto:

• 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 conjunto de white-space:nowrap .

La razón por la que tiene problemas aquí es porque el width de su elemento no está restringido. Tiene una configuración de width , pero como el elemento está configurado para display:inline (es decir, el valor predeterminado) lo ignora, y nada más restringe 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 sus necesidades de diseño).
• Configure uno de sus elementos contenedores para display:block y dé a ese elemento un width fijo o width max-width .
• Establezca el elemento para float:left o float:right (probablemente el primero, pero de nuevo, 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 impacto colateral mínimo en su diseño; funciona muy parecido a la display:inline que se está utilizando actualmente en lo que respecta al diseño, pero siéntase libre de experimentar con los otros puntos también; He intentado dar la mayor cantidad de información posible para ayudarlo a comprender cómo estas cosas interactúan entre sí; una gran parte de la comprensión de CSS se trata de entender cómo los diferentes estilos trabajan juntos.

Espero que ayude.

Aquí hay un jsfiddle con su código, con una display:inline-block agregó display:inline-block , para mostrar lo cerca que estaba.

Referencias útiles:

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