Contrôle du débordement de l'élément TD

J'ai TD avec un long texte. J'aimerais qu'il soit ellipsised, mais je ne veux pas de définir la largeur absolue de cette colonne, je veux qu'il soit calculé de manière dynamique par ses parents de la table. Est-il possible? Voici un code pour l'exemple:

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

Est-il un moyen de forcer le navigateur IE pour afficher les points de suspension, même sans en définir le 'span' élément avec largeur absolue par exemple: width=300px ?

source d'informationauteur Spiderman

La meilleure réponse que j'ai trouvé:
emballage le long contenu de la TD dans le tableau avec la définition:
'table-layout: fixe' Cette magie de résoudre ce problème.

Voir pour vous - même -

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

1

Pas! IE ne permettent pas de changer la façon dont la table est affichée, donc si vous n'utilisez pas un élément comme un span, le texte ne sera pas coupé. Si vous avez besoin de mettre des points de suspension pour clip du texte, vous devez utiliser un élément comme un span ou div avec la largeur absolue.

Pour l'activer automatiquement vous pouvez utiliser du JavaScript ou de l'interrupteur de la table à la div.
J'espère que cela vous aide.

J'ai trouvé une autre manière des œuvres sans table-layout: fixe.

Mettre votre contexte dans un td en utilisant l'entrée Valeur ou espace Réservé attribut.

Puis le Style de l'entrée Comme un contexte normal ne peut pas être modifier.

Cela fonctionne avec une vraie table souples td largeur.

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

0

Avez-vous essayé d'utiliser -ms-text-overflow?

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

Solution à l'aide de jQuery...

Remarque: "text-overflow: ellipsis" ne semble pas fonctionner dans FF4.

Démo: 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>

0

Un pur CSS et JavaScript (pas de jQuery nécessaire) la solution est décrite ici: http://www.ruzee.com/blog/2007/08/ellipsis-or-truncate-with-dots-via-javascript

Mais vous aurez besoin d'envelopper le contenu par Vismari du commentaire ci-dessus.
-4

Vous devez utiliser <table width="inherit"> pour hériter de sa largeur de l'élément parent.

Vous devez vous connecter pour publier un commentaire.