Discussion :

[celerius]

Bonjour à tous,

j'ai un petit problème de style qui je pense peut se règler avec du CSS.

Le voici:
J'ai des informations qui s'affichent dans les cellules d'un tableau. La largeur du tableau est fixée. Malheureusement il arrive que le texte soit trop long et s'affiche sur 2 lignes. En gros j'aimerai que la chaine soit tronquée pour qu'elle rentre dans la cellule.

J'ai fais actuellement un script php qui coupe la chaine après un certain nombre de caractères mais cette solution n'est pas esthétique car tous les caractères n'ont pas la même longueur

avez-vous une solution ?

Merci

[blueice]

Il te suffit de tronquer la chaîne au dernier blanc.
Et tu n'es pas dans le bon forum, il faut aller sur PHP...

Mais c'est mon jour de bonté
Teste ceci

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<?php
function tronquer($chaine,$debut,$max,$ponct='...')
 {
   if (strlen($chaine) >= $max)
    {
      $chaine = substr($chaine, $debut, $max);
      $espace = strrpos($chaine, " ");
      $chaine = substr($chaine, $debut, $espace).$ponct;
      return $chaine;
    }
}
?>

[OButterlin]

Si la longueur et la hauteur de ta colonne sont connues, tu peux utiliser l'attribut overflow : hidden en css

A+

[blueice]

Tu abuses, le code était dans la FAQ, tout ca pour rien

http://php.developpez.com/faq/?page=...haine-troncate

[Bisûnûrs]

Ton texte est-il en un seul mot ou est-ce des mots séparés ?

S'il est un seul mot, je prendrais la solution de OButterlin, seulement le overflow:hidden le fonctionne pas sur les cellules d'un tableau.
Il faut donc faire :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<td style="width:100px;height:20px">
   <div style="overflow:hidden">Ceciestuntextetrèslongquiestcensédépasserles100pxdelargeur</div>
</td>

En revanche, si ton texte est en plusieurs mots ... Tu peux mettre une hauteur à ton div également, le texte sera caché mais pas sur une ligne. :/

[blueice]

Pourquoi vouloir proposer une solution sans PHP ?
Il utilise un script PHP, autant continuer, surtout que mon script ou celui de la FAQ marche très bien

[OButterlin]

Ton texte peut avoir des blancs, ça ne pose pas de problème.
Comme l'a dit Bisûnûrs, ça ne fonctionne pas directement avec les <tr> <td> et il faut mettre un <div> à l'intérieur du <td>.
La différence (par rapport à sa solution), c'est que les attributs width et height doivent être affectés au <div>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
...
   <tr>
      <td>
         <div style="width:100; heigth:20; overflow:hidden">
bla bla bla...
         </div>
      </td>
   </tr>
...

Pour info, il y a aussi la balise <nobr>un texte long qu'un navigateur pourrait scinder...</nobr> pour empêcher le retour à la ligne...

a+

[blueice]

Rajouter une div dans une cellule, ca fait très propre !

Je persiste et je signe

[Bisûnûrs]

On peut même rajouter des points de suspension au script pour montrer que les texte n'est pas complet.

J'approuve la méthode de blueice, je voulais juste montrer que c'était possible en CSS.


@OButterlin : N'oublie pas qu'en CSS les valeurs de taille sont obligatoirement suivies d'une unité (directement attachée à la valeur).

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

width:100px; height:20px;

et non

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

width:100; height:20;

[blueice]

On peut même rajouter des points de suspension au script pour montrer que les texte n'est pas complet.

Euh... c'est déjà le cas !!

[Bisûnûrs]

En effet, j'ai parcouru le code trop vite.

[OButterlin]

Ben ça alors, vous préférez tronquer un texte plutôt que d'utiliser un css ???
Le problème à la base, c'est que la taille de la cellule est fixée et connue.
Comment allez-vous déterminer le nombre de caractères qui correspont à cette largeur ???
Avec une police proportionnelle, 20 W n'ont pas la même largeur que 20 i !!!

Donc je persiste aussi

PS pour Bisûnûrs :
C'est vrai que c'est mieux de préciser l'unité, mais ça marche très bien sans aussi...

[MasterOfChakhaL]

C'est vrai que c'est mieux de préciser l'unité, mais ça marche très bien sans aussi...

je doute que ca marche sous tous les navigateurs... et les em, et les % et les pt, et les ex ... Il fait comment pour deviner ton navigateur?

[OButterlin]

je doute que ca marche sous tous les navigateurs... et les em, et les % et les pt, et les ex ... Il fait comment pour deviner ton navigateur?

Il prend très certainement son défaut...
Dans tous les cas, ça fonctionne très bien sur IE, Mozilla, Firefox (j'ai pas testé les autres navigateurs marginaux) et je RE-précise, c'est mieux de mettre l'unité...

EOT

[celerius]

merci pour vos réponse mais la solution blueice je l'utilise déjà comme je l'indique dans ma dernière phrase. Les caractères n'etant pas de même dimension on peut se retrouver avec une moitié de cellule complète et une loin de l'être pour exactement le même nombre de caractères

pour répondre à Bisûnûrs, mon texte est effectivemment en plusieurs mots,

OButterlin, je vais tester la socution du div et de l'overflow

[MasterOfChakhaL]

C'est pas la solution ultime, mais tu peux, via un script PHP insérer l'entité ­ tous les x caractères (x à choisir de manière empirique ou alors gros algo en perspective).

Cette entité indique au navigateur, que potentiellement, le mot a le droit de se couper à cet endroit (tiret en fin de ligne).
Tu peux réduire, ce traitement au mots qui font plus de nn caractères par exemple.

[celerius]

@OButterlin
En effet la balise nobr est obligatoire pour eviter le retour à la ligne seulemment dès que je l'insère la taille de ma div et de ma cellule sont modifiées.

moi pas comprendre car les tailles sont bien fixées


@MasterOfChakhaL
je vais reflechir à cette utilisation ajoutée à la solution de Obutterlin dès que j'arriverai à faire fonctionner celle-ci fonctionnera pleinement

[MasterOfChakhaL]

moi pas comprendre car les tailles sont bien fixées

C'est ainsi que sont traités les tableaux. La norme indique qu'ils doivent s'adapter à leur contenu.
Tu peux essayer d'ajouter la règle suivante à ton tableau.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
table { table-layout: fixed; }

mais je crois que ce n'est pas bien implémenté par les navigateurs

[OButterlin]

@OButterlin
En effet la balise nobr est obligatoire pour eviter le retour à la ligne seulemment dès que je l'insère la taille de ma div et de ma cellule sont modifiées.

moi pas comprendre car les tailles sont bien fixées

Tu pourrais montrer le code de ta page (pas forcément le tout) ?

[celerius]

j'ai fais un copier/coller rapide, ça peut paraitre un peu brouillon mais c'est à force de modifier sur ce problème à 2balles

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
 
<table border="0" cellpadding="0" cellspacing="0" width="395" >
  <tr>
	   <td colspan="5">
			<img name="images/offreacceuil_r1_c1" src="images/offre-acceuil_r1_c1.jpg" width="395" height="49" border="0" id="offreacceuil_r1_c1" usemap="#m_offreacceuil_r1_c1" alt="" /></td>
   		<td>
   			<img src="spacer.gif" width="1" height="49" border="0" alt="" /></td>
  </tr>
  <?php
	// Affichage de la pagination :
	$i = 0;
	foreach($oDSAnnonce->getResults() as $iRow=>$aRow) {
		$oPublication = PublicationActions::initPublication($aRow["pkPublication"], true);
		$oPoste = PosteActions::initPoste($oPublication->getIDPoste(), true);
		$soustitre = $oPoste->getCoef();
		$secteur = BaseCourrierActions::getLibellesReferentiel($oPoste, 'descriptif/filiere', $oPage->getActiveLanguage());
		if($i%2 == 0 ) $colorline = "#F6F6F6";
		else $colorline = "FFFFFF";
	?>
  <tr>
 
  <!-- passsage qui nous interesse pour ce sujet -->
 
	<td bgcolor="<?=$colorline?>" width="238" height="34" style="padding-left:10px;">
		<div width="228" class='liste_intitule' >
			<nobr><?=ucfirst($this->strRetaille($aRow["intitule"],35))?></nobr> <!-- Texte à afficher sur 1 ligne et à tronquer-->
		</div>
		<div width="228" class="liste_sous_titre">
			<nobr><?echo $this->strRetaille($soustitre,40);?></nobr> <!-- Texte à afficher sur 1 ligne et à tronquer -->
		</div>
	</td>
<!-- fin du passage -->	
 
 
 
	 <td bgcolor="<?=$colorline?>">
	 	<img name="offreacceuil_r2_c2" src="images/offre-acceuil_r2_c2.gif" width="5" height="34" border="0" id="offreacceuil_r2_c2" alt="" /></td>
	 <td bgcolor="<?=$colorline?>" class="liste_annonce" width="97" height="34" align="center"><span class="liste_secteur"><?echo $this->strRetaille($secteur,14);?></span></td>
	 <td bgcolor="<?=$colorline?>">
	 	<img name="offreacceuil_r2_c4" src="images/offre-acceuil_r2_c4.gif" width="5" height="34" border="0" id="offreacceuil_r2_c4" alt="" /></td>
	 <td bgcolor="<?=$colorline?>" class="liste_annonce" align='center' width="50" height="34">
		<a href="javascript:throwAction('detail-offre', <?=$aRow["pkPublication"]?>)" />										   
		<img src="images/accept.gif" border="0" align="absbottom" alt="<?=TXT_ACTION_VOIR?>">
		</a>
	</td>
	<td><img src="spacer.gif" width="1" height="34" border="0" alt="" /></td>
  </tr>
	<?php
		$i++;
	}
?>
 <tr>
   	<td colspan="5"><img name="offreacceuil_r4_c1" src="images/offre-acceuil_r4_c1.jpg" width="395" height="7" border="0" id="offreacceuil_r4_c1" alt="" /></td>
	<td><img src="images/spacer.gif" width="1" height="7" border="0" alt="" /></td>
 </tr>
</table>