Comment puis-je définir une largeur pour tronquer visuellement son contenu affiché?

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

Question

J'essaie de définir une largeur de colonne d'une table, ce qui fonctionne bien jusqu'à ce qu'il arrive au point où les éléments enfants seraient tronqués visuellement ... alors il ne va pas plus petit. ("Visuellement tronqué" - ce qui ne convient pas semble être caché derrière la colonne suivante)

Voici un exemple de code pour démontrer mon problème:

<!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>

J'ai essayé de définir la largeur de différentes manières, y compris

td1.offsetWidth = td1.currentShrinkCount;

et

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

et

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

et 

td1.style.posWidth = td1.currentShrinkCount;

et 

td1.scrollWidth = td1.currentShrinkCount;

et 

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

et 

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

et 

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

Je me rends compte que je pourrais probablement utiliser DIV, mais je préférerais ne pas le faire puisque le tableau est généré à partir d'un contrôle lié, et je ne veux pas vraiment entrer dans la réécriture des contrôles ASP.NET.

Cela dit, je pensais que comme un dernier effort de fossé, je pouvais au moins envelopper le contenu de TD1 par une div, et le débordement prendrait soin des choses, mais même en remplacement

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

avec

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

n'a pas fonctionné.

Quelqu'un sait-il comment je peux définir une largeur pour tronquer visuellement son contenu?

Le navigateur cible BTW-MY est IE7. Les autres navigateurs ne sont pas importants pour le moment, car il s'agit d'une application interne.

Était-ce utile?

La solution

J'ai juste essayé d'ajouter table-layout: fixed; au <table> Et cela a fonctionné pour moi sur IE7.

Dans une disposition de table fixe, la disposition horizontale ne dépend que de la largeur du tableau, de la largeur des colonnes, et non du contenu des cellules

Vérifier La documentation.

Autres conseils

Solution CSS

"Truncate" n'est peut-être pas le mot que vous recherchez. Vous voudrez peut-être simplement cacher les personnages débordants. Si tel est le cas, consultez le «débordement» CSS-Property, qui masquera tout contenu s'étendant au-delà des limites déclarées de son conteneur.

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>

Solution javascript

Si vous souhaitez effectivement tronquer le texte dans le conteneur, vous devrez supprimer un caractère de la droite, tester la largeur du parent et continuer à supprimer les caractères et tester la largeur du parent jusqu'à ce que la largeur du parent correspond à la largeur déclarée.

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

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

Devrait être 

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

Overflow-X est un attribut Microsoft CSS, qui fait désormais partie de CSS3. Je m'en tiendrais à l'ancien attribut Overflow.

ÉDITER:

Comme Paolo mentionne, vous devez également ajouter du tableau de table: fixe; et spécifiez la largeur du tableau. Un exemple complet suit.

<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>

Pour autant que je sache, une cellule de table s'étirera toujours pour s'adapter à son contenu.

Avez-vous pensé à utiliser JavaScript pour tronquer dynamiquement les données dans les cellules de table qui ont plus qu'une certaine quantité de contenu? Alternativement, vous pouvez le faire plus facilement le côté serveur.

Vous pouvez utiliser jQuery ou JavaScript simple pour entourer le contenu de vos cellules avec des balises div et définir une largeur fixe et déborder: caché sur ceux-ci à la place. Pas beau, mais ça fonctionnerait.

ETA:

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

Puisque la div est l'élément délimitant, c'est là que la largeur doit être définie.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top