¿Cómo puedo establecer un ancho de para truncar visualmente su contenido mostrado?

StackOverflow https://stackoverflow.com/questions/480722

Pregunta

Estoy tratando de establecer un ancho de columna de una tabla, que funciona bien hasta que llegue al punto en que los elementos infantiles se truncarían visualmente ... entonces no será más pequeño. ("Visualmente truncado"-lo que no se ajusta parece estar oculto detrás de la siguiente columna)

Aquí hay algún código de muestra para demostrar mi problema:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script language="javascript" type="text/javascript">
    var intervalID = null;

    function btn_onClick()
    {
        // keep it simple, only click once
        var btn = document.getElementById("btn");
        btn.disabled = true;     
        // start shrinking
        intervalID = window.setInterval( "shrinkLeftCell();", 100);
    }

    function shrinkLeftCell()
    {
        // get elements
        var td1 = document.getElementById("td1");
        var td2 = document.getElementById("td2");

        // initialize for first pass
        if( "undefined" == typeof( td1.originalWidth))
        {
            td1.originalWidth = td1.offsetWidth;
            td1.currentShrinkCount = td1.offsetWidth;
        }

        // shrink and set width size
        td1.currentShrinkCount--;
        td1.width = td1.currentShrinkCount;  // does nothing if truncating!

        // set reporting values in right cell
        td2.innerHTML = "Desired Width : [" 
                    + td1.currentShrinkCount 
                    + "], Actual : [" 
                    + td1.offsetWidth + "]";

        // Stop shrinking
        if( 1 >= td1.currentShrinkCount)
            window.clearInterval(intervalID);
    }
</script>
</head>
<body>
    <table width="100%" border="1">
        <tr>
            <td id="td1">
                Extra_long_filler_text
            </td>
            <td id="td2">
                Desired Width : [----], Actual : [----]
            </td>
        </tr>
    </table>

    <button id="btn" onclick="btn_onClick();">Start</button>
</body>
</html>

He intentado establecer el ancho de diferentes maneras, incluida

td1.offsetWidth = td1.currentShrinkCount;

y

td1.width = td1.currentShrinkCount + "px";

y

td1.style.width = td1.currentShrinkCount + "px";

y 

td1.style.posWidth = td1.currentShrinkCount;

y 

td1.scrollWidth = td1.currentShrinkCount;

y 

td1.style.overflow = "hidden";
td1.width = td1.currentShrinkCount;

y 

td1.style.overflow = "scroll";
td1.width = td1.currentShrinkCount;

y 

td1.style.overflow = "auto";
td1.width = td1.currentShrinkCount;

Me doy cuenta de que probablemente podría usar Div's, pero preferiría no hacerlo ya que la mesa se está generando a partir de un control límite, y realmente no quiero volver a reescribir los controles ASP.NET.

Dicho esto, pensé como un último esfuerzo de zanja, al menos podría envolver el contenido de cada 'TD1 con un DIV, y el desbordamiento se encargaría de las cosas, pero incluso reemplazando

<td id="td1">
    Extra_long_filler_text
</td>

con

<td id="td1" style="overflow:hidden;">
    <div style="margin=0;padding:0;overflow:hidden;">
        Extra_long_filler_text
    </div>
</td>

no funcionó.

¿Alguien sabe cómo puedo establecer un ancho para truncar visualmente su contenido?

Por cierto, el navegador objetivo es IE7. Otros navegadores no son importantes en este momento, ya que esta es una aplicación interna.

¿Fue útil?

Solución

Solo intenté agregar table-layout: fixed; hacia <table> Y funcionó para mí en IE7.

En un diseño de tabla fija, el diseño horizontal solo depende del ancho de la tabla, el ancho de las columnas y no el contenido de las celdas

Verificar la documentación.

Otros consejos

Solución CSS

"Truncar" puede no ser la palabra que estás buscando. Es posible que solo desee ocultar los personajes desbordantes. Si ese es el caso, busque el "desbordamiento" de la propiedad CSS, que ocultará cualquier contenido que se extienda más allá de los límites declarados de su contenedor.

td div.masker {
  height:25px;
  width:100px;
  overflow:hidden;
}

<td>
  <div class="masker">
    This is a string of sample text that
    should be hidden when it reaches out of the bounds of the parent controller.
  </div>
</td>

Solución JavaScript

Si realmente desea truncar el texto dentro del contenedor, deberá eliminar un carácter de la derecha, probar el ancho del padre y continuar eliminando los caracteres y probando el ancho principal hasta que el ancho principal coincida con el ancho declarado.

while (parent.width > desiredWidth) {
  remove one char from right-side of child-text
}

<td id="td1" style="overflow-x:hidden;">

Debiera ser 

<td id="td1" style="overflow:hidden;">

Overflow-X es un atributo CSS de Microsoft, que ahora es parte de CSS3. Me quedaría con el atributo de desbordamiento anterior.

EDITAR:

Como Paolo menciona, también debe agregar la capa de mesa: fijo; y especifique el ancho de la tabla. Sigue un ejemplo completo.

<html>
<head>
<style>
    table
    {

        table-layout:fixed;
        width:100px;
        }
td
{
    overflow:hidden;
    width:50px;
    border-bottom: solid thin;
    border-top:solid thin;
    border-right:solid thin;
    border-left:solid thin;

}
</style>
</head>
<body>
<table>
<tr><td>Some_long_content</td><td>Short</td></tr>
</table>
</body>
</html>

Hasta donde yo sé, una celda de mesa siempre se estirará para acomodar su contenido.

¿Ha pensado en usar JavaScript para truncar dinámicamente los datos en las celdas de la tabla que tienen más de una cierta cantidad de contenido? Alternativamente, podría hacerlo más fácilmente del lado del servidor.

Puede usar jQuery o JavaScript simple para rodear el contenido de sus celdas con etiquetas DIV y establecer un ancho fijo y desbordamiento: oculto en ellas. No es hermoso, pero funcionaría.

ETA:

<td><div style="width:30px;overflow:hidden">Text goes here</div></td>

Dado que el DIV es el elemento delimitador, ahí es donde se debe establecer el ancho.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top