(Résolu) [CSS] Forcer une chaîne à se couper (en fin de cellule)

[CSS] Forcer une chaîne à se couper (en fin de cellule) (Résolu) - HTML/CSS - Programmation

Marsh Posté le 13-04-2005 à 12:12:22    

Bonjour à tous,  
 
Voilà un petit moment que je fouille le web pour trouver un moyen de forcer les chaînes de caractère (sans espaces) à se couper.
 
Je m'explique :  
Je suis (malheureusement) obligé de travailler avec des tableaux (svp pas de débat sur l'inutilité des tableaux, je le sais fort bien mais c'est le boulot j'suis obligé pour le moment ...  :cry:), qui ont des cellules de taille fixe.
 
Imaginons :  

Code :
  1. td.montableau {
  2. width:50pt;
  3. height:50pt;
  4. }
  5. (...)
  6. <table>
  7. <tr><td class="montableau">
  8. Contenu cellule
  9. </table>


Dans l'exemple ci-dessus, dans la cellule on verra "Contenu" sur une ligne et "Cellule" sur l'autre, tout à fait normalement.
 
 
Bon maintenant imaginons que je remplace par :  

Code :
  1. (...)
  2. <table>
  3. <tr><td class="montableau">
  4. Anticonstitutionnellement
  5. </table>


eh bien la largeur de la cellule est automatiquement ajustée (agrandie, en l'occurence) et ça je ne le veux pas.
 
Je cherche donc à faire comprendre au navigateur que une fois que les lettres ont atteint le bord de la cellule, elles doivent continuer sur la ligne suivante dans le genre :  
 
Anticonstituti
onnellement
 
(je n'ai pas besoin de les couper de manière "officielle" avec un trait d'union comme sur Word par exemple)
 
Voici les voies que j'ai déjà explorées :  
 
- Je pense qu'il y a moyen de faire une fonction qui coupe la chaîne affichée en mini-chaînes de 1 caractère collées les unes aux autres, mais c'est lourdingue au possible.
 
- J'ai trouvé la propriété "table-layout:fixed;" (http://www.w3.org/TR/REC-CSS2/tables.html#propdef-table-layout) mais celle-ci ne fonctionne que sur IE (et bien sûr je bosse sur Firefox...) et en plus le mot n'est juste pas affiché dans son entiéreté ; il n'est pas "coupé".
 
- Il existe une foule de recommandations CSS3 chez W3C (http://www.w3.org/TR/css3-text/) (word-break et compagnie) mais je n'arrive pas à les mettre en place, c'est très nébuleux et je crains que l'intégration CSS3 dans Firefox soit encore fort peu définie.
 
CSS doit sûrement permettre de faire ça sans trop se compliquer la vie, mais je ne trouve pas ...  
 
Quelqu'un ici peut me mettre sur la voie please ?


Message édité par ZeBix le 13-04-2005 à 16:09:16
Reply

Marsh Posté le 13-04-2005 à 12:12:22   

Reply

Marsh Posté le 13-04-2005 à 14:02:03    

Laisse tomber, et inspire-toi du code de ce forum. Ce sera possible en CSS3

Reply

Marsh Posté le 13-04-2005 à 14:22:01    

Merci pour ta réponse FlorentG mais que veux tu dire par m'inspirer du code de ce forum ?
 
NB : je ne peux pas "laisser tomber", bien malheureusement ...  je pense qu'au pire je mettrai en place la "solution lourdingue" que j'évoque plus haut.
 
*edit* : argh, la solution de découpe ne marche pas. Le navigateur estime que les mini-chaînes de 1 caractère collées les unes aux autres se comportent exactement comme une grande chaîne, c'est-à-dire insécable.


Message édité par ZeBix le 13-04-2005 à 14:33:49
Reply

Marsh Posté le 13-04-2005 à 14:43:41    

les mini-chaînes de 1 caractère :??:

Reply

Marsh Posté le 13-04-2005 à 16:08:53    

Voilà, solution trouvée.
 
Découper les chaînes caractère par caractère (cf. fonction), rajouter un espace après chacune d'elles, et diminuer le letter-spacing pour ce mot.  
 
C'est pourchaud comme pas possible et ça va donner des résultats différents en fonction des polices, des navigateurs etc. mais  çe marche pour ce qu'on m'a demandé donc voilà :  
 

Code :
  1. <?
  2. function decoupe($mastring)
  3. {
  4. for ($i=0;$i<strlen($mastring);$i++)
  5. { echo $mastring[$i]." "; }
  6. }
  7. ?>
  8. <table border=1>
  9. <tr><td style="width:50pt;height:50pt;letter-spacing:-1.8;">
  10. <? decoupe("Anticonstitutionnellement" ); ?>
  11. </table>


 
Merci pour les tentatives d'aide Florent...  :hello:

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed