Come posso impostare una larghezza per troncare visivamente il contenuto visualizzato?

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

Domanda

Sto cercando di impostare una larghezza di una colonna di un tavolo, che funziona bene fino a quando non arriva al punto in cui gli elementi dei bambini sarebbero troncati visivamente ... quindi non si ridimensionerà. ("visivamente troncato"-ciò che non si adatta sembra essere nascosto dietro la colonna successiva)

Ecco un codice di esempio per dimostrare il mio 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>

Ho provato a impostare la larghezza in modi diversi, incluso

td1.offsetWidth = td1.currentShrinkCount;

e

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

e

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

e 

td1.style.posWidth = td1.currentShrinkCount;

e 

td1.scrollWidth = td1.currentShrinkCount;

e 

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

e 

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

e 

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

Mi rendo conto che probabilmente potrei usare Div, ma preferirei non farlo dal momento che la tabella viene generata da un controllo limitato e non voglio davvero entrare nella riscrittura dei controlli ASP.NET.

Detto questo, ho pensato come un ultimo sforzo di fossato, avrei potuto almeno avvolgere il contenuto di ogni TD1 con un div e l'overflow si sarebbe preso cura delle cose, ma persino a sostituire

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

insieme a

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

non ha funzionato.

Qualcuno sa come posso impostare una larghezza per troncare visivamente il suo contenuto?

Btw-my browser target è IE7. Altri browser non sono importanti in questo momento, poiché questa è un'app interna.

È stato utile?

Soluzione

Ho appena provato ad aggiungere table-layout: fixed; al <table> E ha funzionato per me su IE7.

In un layout della tabella fissa, il layout orizzontale dipende solo dalla larghezza della tabella, dalla larghezza delle colonne e non dal contenuto delle celle

Guardare la documentazione.

Altri suggerimenti

Soluzione CSS

"Truncate" potrebbe non essere la parola che stai cercando. Potresti solo voler nascondere i personaggi traboccanti. In tal caso, esaminare il "overflow" CSS-Property che nasconderà qualsiasi contenuto che si estende oltre i limiti dichiarati del suo contenitore.

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>

Soluzione JavaScript

Se vuoi davvero troncare il testo all'interno del contenitore, dovrai rimuovere un carattere da destra, testare la larghezza del genitore e continuare a rimuovere i caratteri e testare la larghezza del genitore fino a quando la larghezza del genitore non corrisponde alla larghezza dichiarata.

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

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

Dovrebbe essere 

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

Overflow-X è un attributo Microsoft CSS, che ora fa parte di CSS3. Rimanerei con l'attributo di overflow più vecchio.

MODIFICARE:

Come menziona Paolo, devi anche aggiungere il layout della tabella: fisso; e specificare la larghezza della tabella. Segue un esempio 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>

Per quanto ne so, una cella da tavolo si estenderà sempre per adattarsi al suo contenuto.

Hai pensato di utilizzare JavaScript per troncare dinamicamente i dati nelle celle della tabella che hanno più di un certo contenuto? In alternativa, potresti fare questo lato server più facilmente.

È possibile utilizzare jQuery o JavaScript semplice per circondare il contenuto delle celle con tag DIV e impostare una larghezza fissa e un overflow: nascosto su quelli invece. Non è bello, ma funzionerebbe.

ETA:

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

Poiché il Div è l'elemento di delimitazione, è qui che dovrebbe essere impostata la larghezza.

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top