Truncar texto para que se ajuste a la celda de la tabla sin aplicar css o jquery

Question

Quiero que el texto en una de las columnas de una tabla no se ajuste, sino que simplemente se trunque para que coincida con el actual de la celda de la tabla. No quiero que la celda de la tabla cambie de tamaño, ya que necesito que la mesa sea exactamente 100% del ancho del contenedor.

Esto se debe a que la tabla con 100% de ancho se encuentra dentro de una posición div con desbordamiento: automático (en realidad está dentro de un panel jQuery UI.Layout).

Intenté ambos overflow: hidden y el texto todavía está envuelto. Intenté white-space: nowrap, pero extendió la tabla más ancha que 100% y agregué una barra de desplazamiento horizontal.

div.container { 
    position: absolute; 
    overflow: auto; 
    /* user can slide resize bars to change the width & height */ 
    width: 600px; 
    height: 300px; 
} 
table { width: 100% } 
td.nowrap { 
    overflow: hidden; 
    white-space: nowrap; 
} 
<div class="container"> 
    <table> 
    <tr> 
     <td>From</td> 
     <td>Subject</td> 
     <td>Date</td> 
    </tr> 
    <tr> 
     <td>Bob Smith</td> 
     <td class="nowrap"> 
     <strong>Message subject</strong> 
     <span>This is a preview of the message body and could be long.</span> 
     </td> 
     <td>2010-03-30 02:18AM</td> 
    </tr> 
    </table> 
</div> 

¿Hay alguna manera el uso de CSS para resolver esto? Si tuviera un tamaño de celda de tabla fijo, entonces overflow:hidden truncaría todo lo que fluye, pero no puedo usar un tamaño fijo porque quiero que la tabla se estire con el tamaño del panel UI.Layout.

De lo contrario, ¿cómo podría solucionar esto con jQuery?

Mi caso de uso es similar a la interfaz de Gmail, donde un asunto del correo electrónico está en negrita y se muestra el principio del cuerpo del mensaje, pero luego se trunca para que encaje.

Answer 1

Tal vez esto le ayudará JQuery HTML Truncator by Henrik Nyh :)

Answer 2

Usted no tiene que especificar el tamaño de la celda en píxeles, puede simplemente usar porcentajes :

td.nowrap { 
overflow: hidden; 
white-space: nowrap; 
width: 60%; /* or whatever */ 
} 

Answer 3

Pruebe esto en el lapso etiqueta dentro de td

(late) pero podría ayudar a otra persona)

Answer 4

Esto es bastante antiguo, pero esta es mi respuesta.

table { width: 100%; table-layout: fixed;} 

DEMO