web-dev-qa-db-fra.com

CSS/Javascript pour forcer la ligne de tableau html sur une seule ligne

J'ai un tableau HTML qui ressemble à ceci:

-------------------------------------------------
|Column 1                   |Column 2           |
-------------------------------------------------
|this is the text in column |this is the column |
|one which wraps            |two test           |
-------------------------------------------------

Mais je veux que ça cache le débordement. La raison ici est que le texte contient un lien vers plus de détails et que le "wrapping" gaspille beaucoup d’espace dans ma mise en page. Cela devrait ressembler à ça (sans augmenter la largeur des colonnes ni du tableau, sinon ils sortiraient de l'écran/créeraient une barre de défilement horizontale):

-------------------------------------------------
|Column 1                   |Column 2           |
-------------------------------------------------
|this is the text in column |this is the column |
-------------------------------------------------

J'ai essayé beaucoup de techniques CSS différentes pour essayer cela, mais je ne peux pas réussir. Mootables est la seule chose que j'ai trouvée qui fasse ceci: http://joomlicious.com/mootable/ , mais je ne peux pas comprendre comment ils le font. Est-ce que quelqu'un sait comment faire cela avec ma propre table en utilisant CSS et/ou Javascript, ou comment Mootables le fait-il?

Exemple HTML:

<html><body>
<table width="300px">
<tr>
    <td>Column 1</td><td>Column 2</td>
</tr>
<tr>
   <td>this is the text in column one which wraps</td>
   <td>this is the column two test</td>
</tr>
</table></body></html>
javascripthtmlcss
65
ine

Utilisez la propriété CSS white-space: nowrap et overflow: hidden sur votre td.

Mettre à jour

Je viens de voir votre commentaire, je ne suis pas sûr de ce que je pensais, je l'ai fait tant de fois que j'ai oublié comment je le fais. Pour moi, cette approche fonctionne bien dans la plupart des navigateurs ... plutôt que d'essayer de contraindre le td, j'utilise un div à l'intérieur du td qui gérera l'instance de débordement. Cela a un effet secondaire agréable de pouvoir ajouter votre remplissage, vos marges, vos couleurs d’arrière-plan, etc. à votre div, plutôt que d’essayer de styliser le td.

<html>
<head>
<style>
.hideextra { white-space: nowrap; overflow: hidden; text-overflow:Ellipsis; }
</style>
</head>
<body>
<table style="width: 300px">
<tr>
    <td>Column 1</td><td>Column 2</td>
</tr>
<tr>
   <td>
    <div class="hideextra" style="width:200px">
        this is the text in column one which wraps</div></td>
   <td>
    <div class="hideextra" style="width:100px">
        this is the column two test</div></td>
</tr>
</table>
</body>
</html>

En prime, IE placera un Ellipsis dans le cas d'un débordement utilisant le style de débordement de texte spécifique au navigateur: Ellipsis. Il existe un moyen de faire la même chose dans FireFox automatiquement aussi, mais je ne l’ai pas testé moi-même.

Mise à jour 2

J'ai commencé à utiliser ce code de troncature par Justin Maxwell depuis plusieurs mois maintenant, ce qui fonctionne également dans FireFox.

88
DavGarcia

Cette astuce utilise ici la règle ésotérique table-layout:fixed

Ce CSS devrait fonctionner contre votre exemple HTML:

table {table-layout:fixed}
td {overflow:hidden; white-space:nowrap}

Vous devez également spécifier des largeurs de colonne explicites pour le <td>s.

La règle table-layout:fixed indique "La largeur des cellules de ce tableau dépend de ce que je dis, pas du contenu réel des cellules". Ceci est utile normalement car le navigateur peut commencer à afficher la table après avoir reçu le premier <tr>. Sinon, le navigateur doit recevoir la totalité du tableau avant de pouvoir calculer la largeur des colonnes. 

28
Triptych

Essayer:

td, th {
  white-space: nowrap;
  overflow: hidden;
}
7
cletus

Pour ceux plus intéressés: 

Cellules de tableau dynamique existantes: ## Texte long sans espaces, c.-à-d. Adresses e-mail ## 

Il semble qu’une réplication complète de l’utilisation de text-overflow:Ellipsis par la MS (et d’autres) ne puisse être dupe dans FireFox dans la mesure où l’ajout du … ajouté en interne au texte coupé est concerné; surtout sans javascript qui est souvent désactivé par l'utilisateur ces jours-ci. 

Toutes les idées que j'ai trouvées pour m'aider n'ont pas permis de traiter le redimensionnement dynamique et le texte long sans espaces. 

Cependant, j'avais besoin d'un découpage dans une table de largeur dynamique dans l'une de mes fenêtres d'administration de progs. Donc, avec un peu de bidouillage, toutes les réponses du navigateur acceptables peuvent être piratées à partir des exemples fournis à «MSDN». 

c'est à dire. 

<table width="20%" border="1" STYLE="position: absolute; top: 100;">
<tr>

<td width="100%"><DIV STYLE="position: relative; height: 14px; top: 0px; width:100%;">
<DIV STYLE="position: absolute; left: 0px; top: 0px; color: black; width: 100%; height: 14px;
    font: 12px Verdana, Arial, Geneva, sans-serif; overflow: hidden; text-overflow:Ellipsis;">
<NOBR>fasfasfasfasfsfsffsdafffsafsfsfsfsfasfsfsfsafsfsfsfWe hold these truths to be self-evident, that all people are created equal.</NOBR></DIV>
</DIV>

</td>
</tr>
</table>

Seul petit inconvénient, les utilisateurs de Firefox ne voient pas le bit “…”; qui est summink je ne me dérange pas vraiment à ce stade. 

Il faut espérer que les futures FF régleront avec grâce si l’on met en œuvre cette option très importante et utile. Je n’ai donc pas besoin de réécrire en utilisant un contenu non favorable futuriste moins favorable non plus (ne discutez pas; il y a beaucoup de sites Web cassés autour de la cause de ces jours-ci). 

Merci à: http://msdn.Microsoft.com/en-us/library/ms531174(VS.85).aspx

J'espère que ça aide certains bod. 

2
Ron W

Comme Cletus l'a dit, vous devriez utiliser white-space: nowrap pour éviter le retour à la ligne, et overflow:hidden pour masquer le débordement. Toutefois, pour qu'un texte soit considéré comme un dépassement, vous devez définir la largeur td/th. Ainsi, si le texte nécessite plus que la largeur spécifiée, il sera considéré comme un dépassement et sera masqué.

De plus, si vous donnez un exemple de page Web, les répondants peuvent fournir une page mise à jour avec le correctif souhaité.

1
splintor

Utilisez position: absolue; et largeur: xxx%; sur l'élément td.

0
Konstantin XFlash Stratigenas

Si vous masquez le débordement et qu'il y a un long mot, vous risquez de le perdre, vous pouvez donc aller plus loin et utiliser l'attribut css "Word-wrap".

http://msdn.Microsoft.com/en-us/library/ms531186(VS.85).aspx

0
Jobo

Je me demande si l'utilisation de PHP (ou d'un autre langage de script côté serveur) ou de Javascript pour tronquer les chaînes à la bonne longueur est intéressante (bien que calculer la bonne longueur soit délicat, à moins d'utiliser une police à largeur fixe) ?

0
Ben