Desbordamiento de control del elemento TD

Question

Tengo TD con texto largo en ella. Me gustaría que fuera ellipsado, pero no quiero definir el ancho absoluto de esta columna; quiero que se calcule dinámicamente por su tabla padre. ¿Es posible? Aquí es un código, por ejemplo:

<table width="100%" border="3"> 
<tr> 
<td ><span style="white-space: nowrap; overflow: hidden; 
text-overflow: ellipsis;" > 
Here should be very long text: 
bla bla bla bla bla bla bla bla bla bla bla bla bla bla 
bla bla bla bla bla bla bla bla bla bla bla bla bla bla 
bla bla bla bla bla bla bla bla bla bla bla bla bla bla 
bla bla bla bla bla bla bla bla bla bla bla bla bla bla 
</span></td> 
</table> 

¿Hay alguna manera de forzar el navegador Internet Explorer para mostrar puntos suspensivos aún sin definir el elemento 'lapso' con ancho absoluto por ejemplo: width = 300px?

Answer 1

La mejor respuesta que he encontrado: envolver el largo contenido de la TD en la tabla con la definición:
'table-layout: fijo' Esto mágicamente resolver este problema.

Véase, por sí mismo -

<table width="100%" border="3"> 
<tr> <td> 
<TABLE width=100% cellpadding=0 cellspacing=0 style='table-layout:fixed'><TR> 
<TD style='text-overflow: ellipsis; overflow: hidden; white-space: nowrap;'> 
Here should be very long text: 
bla bla bla bla bla bla bla bla bla bla bla bla bla bla 
bla bla bla bla bla bla bla bla bla bla bla bla bla bla 
bla bla bla bla bla bla bla bla bla bla bla bla bla bla 
bla bla bla bla bla bla bla bla bla bla bla bla bla bla 
</TD></TR></TABLE> 
</td> 
</table> 

Answer 2

¿Ha intentado utilizar -ms-text-overflow?

http://msdn.microsoft.com/en-us/library/ms531174(v=vs.85).aspx

Answer 3

Solución usando jQuery ...

Nota: "text-overflow: puntos suspensivos" no parece estar trabajando en FF4.

Demostración: http://jsfiddle.net/vgfDd/1/

$w = $('.setWidth').attr('width'); 
$('.setWidth').find('span').width($w); 

CSS ...

table { 
    border: 3px solid black; 
} 

span { 
    display: block; 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
} 

HTML ...

<table width="100px" class="setWidth"> 
    <tr> 
     <td> 
      <span> 
       Here should be very long text: 
       bla bla bla bla bla bla bla 
      </span> 
     </td> 
     <td> 
      <span> 
       Here should be very long text: 
       bla bla bla bla bla bla bla 
      </span> 
     </td> 
    </tr> 
</table> 

Answer 4

No! IE no permite cambiar la forma en que se muestra la tabla, por lo que si no usa un elemento como un tramo, el texto no se recortará. Si necesita poner puntos suspensivos para recortar el texto, debe usar un elemento como un tramo o div con ancho absoluto.

Para activarlo automáticamente puede usar JavaScript o cambiar de tabla a div. Espero que esto te ayude.

Answer 5

Un puro CSS y JavaScript (jQuery no es necesario) la solución se describe aquí: http://www.ruzee.com/blog/2007/08/ellipsis-or-truncate-with-dots-via-javascript

pero necesitará para envolver el contenido por el comentario de Vismari anteriormente.

Answer 6

he encontrado otra forma en que funciona sin table-layout: fijo.

Deja tus contexto en un td mediante la entrada Valor o marcador de posición atributo.

Luego, Style la entrada Como un contexto normal, no se puede editar.

Esto funcionará con un verdadero ancho de tabla flexible td.

<table> 
    <tr> 
    <td> 
     <input type="text" value="TitleTitleTitleTitle" /> 
    </td> 
    <td> 
     <input type="text" placeholder="ValueValueValueValue" /> 
    </td> 
    <td> 
     <input type="text" value="NumberNumberNumberNumber" /> 
    </td> 
    </tr> 
</table> 
<style> 
table{ 
    width: 100%; 
} 
td{ 
    input{ 
    display: block; 
    width: 100%; 
    text-overflow: ellipsis; 
    overflow: hidden; 
    -webkit-user-select: none; 
    cursor: default; 
    } 
} 
</style> 

Answer 7

Debe utilizar <table width="inherit"> para que pueda heredar su anchura del elemento padre.