¿Por qué no funcionan los puntos suspensivos CSS en la celda de la tabla?

Considere el siguiente ejemplo: ( demostración en vivo aquí )

$(function() {
  console.log("width = " + $("td").width());
});

td {
  border: 1px solid black;
  width: 50px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td>Hello Stack Overflow</td>
    </tr>
  </tbody>
</table>

El resultado es: width = 139y los puntos suspensivos no aparecen.

¿Que me estoy perdiendo aqui?

Aparentemente, agregando:

td {
  display: block; /* or inline-block */
}

resuelve el problema también.

Otra posible solución es establecer table-layout: fixed;la tabla, y también establecerla width. Por ejemplo: http://jsfiddle.net/fd3Zx/5/

También es importante poner

table-layout:fixed;

En la tabla que contiene, por lo que también funciona bien en IE9 (si utiliza max-width).

Como se dijo antes, puede usar, td { display: block; }pero esto anula el propósito de usar una tabla.

Puede usar, table { table-layout: fixed; }pero tal vez desee que se comporte de manera diferente para algunas columnas.

Entonces, la mejor manera de lograr lo que desea sería envolver su texto en <div>ay aplicar su CSS al <div>(no al <td>) de esta manera:

td {
  border: 1px solid black;
}
td > div {
  width: 50px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

Intente usar en max-widthlugar de width, la tabla seguirá calculando el ancho automáticamente.

Funciona incluso en ie11(con el modo de compatibilidad ie8).

td.max-width-50 {
  border: 1px solid black;
  max-width: 50px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

<table>
  <tbody>
    <tr>
      <td class="max-width-50">Hello Stack Overflow</td>
    </tr>
    <tr>
      <td>Hello Stack Overflow</td>
    </tr>
    <tr>
      <td>Hello Stack Overflow</td>
    </tr>
  </tbody>
</table>

jsfiddle .

Página de demostración

Para las tablas con ancho dinámico, encontré la siguiente forma de producir resultados satisfactorios. Cada uno <th>que desee tener la capacidad de texto recortado debe tener un elemento de ajuste interno que envuelva el contenido del <th>permiso text-overflowpara trabajar.

El verdadero truco es establecer max-width(en <th>) en vwunidades .

Esto hará que el ancho del elemento esté "vinculado" al ancho de la ventana gráfica (ventana del navegador) y dará como resultado un recorte de contenido receptivo. Establezca las vwunidades a un valor satisfactorio necesario.

CSS mínimo:

th{ max-width:10vw; }
      
th > .wrap{ 
   text-overflow:ellipsis;
   overflow:hidden;
   white-space:nowrap;
}

Aquí hay una demostración ejecutable:

table {
  font: 18px Arial;
  width: 40%;
  margin: 1em auto;
  color: #333;
  border: 1px solid rgba(153, 153, 153, 0.4);
}

table td, table th {
  text-align: left;
  padding: 1.2em 20px;
  white-space: nowrap;
  border-left: 1px solid rgba(153, 153, 153, 0.4);
}

table td:first-child, table th:first-child {
  border-left: 0;
}

table th {
  border-bottom: 1px solid rgba(153, 153, 153, 0.4);
  font-weight: 400;
  text-transform: uppercase;
  max-width: 10vw;
}

table th > .wrap {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

<table>
    <thead>
        <tr>
            <th>
                <div class="wrap" title="Some long title">Some long title</div>
            </th>
            <th>
                <div class="wrap">Short</div>
            </th>
            <th>
                <div class="wrap">medium one</div>
            </th>
            <th>
                <div class="wrap" title="endlessly super long title which no developer likes to see">endlessly super long title which no developer likes to see</div>
            </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>-</td>
            <td>-</td>
            <td>-</td>
            <td>very long text here</td>
        </tr>
    </tbody>
</table>

Solo ofrecí una alternativa porque tenía este problema y ninguna de las otras respuestas aquí tuvo el efecto deseado que quería. Entonces, en cambio, usé una lista. Ahora, semánticamente, la información que estaba enviando podría considerarse tanto datos tabulares como datos listados.

Así que al final lo que hice fue:

<ul>
    <li class="group">
        <span class="title">...</span>
        <span class="description">...</span>
        <span class="mp3-player">...</span>
        <span class="download">...</span>
        <span class="shortlist">...</span>
    </li>
    <!-- looped <li> -->
</ul>

Así que básicamente ules table, lies try spanes td.

Luego, en CSS, configuro los spanelementos para que sean display:block;y float:left;(prefiero esa combinación inline-blockya que funcionará en versiones anteriores de IE, para borrar el efecto flotante, consulte: http://css-tricks.com/snippets/css/clear- arreglar / ) y también tener las elipses:

span {
    display: block;
    float: left;
    width: 100%;

    // truncate when long
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

Luego, todo lo que debe hacer es establecer el max-widthsintervalo y eso le dará a la lista una apariencia de tabla.

En lugar de usar puntos suspensivos para resolver el problema de desbordamiento de texto, descubrí que una entrada deshabilitada y con estilo se veía mejor y aún permite al usuario ver y seleccionar toda la cadena si es necesario.

<input disabled='disabled' style="border: 0; padding: 0; margin: 0" />

Parece un campo de texto pero se puede resaltar, por lo que es más fácil de usar

Verifique la box-sizingpropiedad css de sus tdelementos. Tuve un problema con la plantilla css que lo establece en border-boxvalor. Necesitas conjunto box-sizing: content-box.

Deja tus mesas como están. Simplemente envuelva el contenido dentro de los TD con un lapso que tenga aplicado el CSS de truncamiento.

/* CSS */
.truncate {
    width: 50px; /*your fixed width */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block; /* this fixes your issue */
}

<!-- HTML -->
<table>
    <tbody>
        <tr>
            <td>
                <span class="truncate">
                    Table data to be truncated if it's too long.
                </span>
            </td>
        </tr>
    </tbody>
</table>

Si no desea establecer max-width en td (como en esta respuesta ), puede establecer max-width en div:

function so_hack(){}

function so_hack(){} http://jsfiddle.net/fd3Zx/754/ function so_hack(){}

function so_hack(){}

Nota: 100% no funciona, pero 99% hace el truco en FF. Otros navegadores modernos no necesitan trucos div tontos.

td {
  borde: 1px negro sólido;
    relleno-izquierda: 5px;
    relleno derecho: 5px;
}
td> div {
    ancho máximo: 99%;
    desbordamiento: oculto;
    desbordamiento de texto: puntos suspensivos;
    espacio en blanco: nowrap;

}