28172 sujets

CSS et mise en forme, CSS3

Mots trop long qui etire mes div ?

Bonjour,

J'aimerai savoir comment empecher sous IE qu'un mot trop long comme, par exemple :
ggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg
n'etire ma DIV ou ma balise TD.

J'ai essaye avec un overflow-x:hidden dans l'element contenant (DIV et TD) mais ca ne change rien. Mes boites sont tjs etirees et l'affichage est totalement explose.

Merci.
Merci pour votre aide, mais mon problème ne vient pas de la césure, ça je l'aurai vu.
J'ai réellement besoin de prendre en considération ces mots très/trop longs, en effet le contenu de ma boîte sera du texte enregistré par des utilisateurs. De plus ma boîte à une dimension en pourcentage puisque j'affiche ma page en 100%.
Ainsi il peut arriver que qq1 écrive un mot comme :
Yooouuuuuupppppppppppiiiiiiiiiiiiiiiiiiiii!!!!!!!!!!!!!!!!!!!
pour s'amuser et du coup, IE foire et étire tout.
Le problème apparaît aussi sous FF mais différement et seulement avec la TD. Sous FF la TD est étirée par ce mot trop long mais la partie étirée est cachée. Je peux détecter cet étirement car le texte précédent en "justifié" se retrouve à sortir de mon bloc.

Voici le code employé :
XHTML:
	<td class="bl_main_data bl_just">
		<h3><a href="">My Name</a></h3> wrote <div class="grey comment">at 5:15pm on January 2nd, 2007</div>
		<div class="line_grey"></div>
		<h4>I write a message here !ccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc<br/><br/>Happy new year !<br/> Test<br/> Test<br/> Test</h4>
	</td>


CSS:

h3,h4,h5 {margin:0;padding:0;font-size:12px}
h3, h4 {line-height:16px}
h3 {color:#5171B1;font-weight:bold}
h4 {color:#333;font-weight:normal}
.grey {color:#888}
.comment {font-style:italic}
.bl_main_data {vertical-align:top;width:100%;padding-top:3px;overflow:hidden}
.bl_just {text-align:justify}


P.S.: J'avais déjà essayé avec le overflow:hidden mais cela ne faisait rien.
Modifié par MacFr (12 Jan 2007 - 16:52)
Administrateur
MacFr a écrit :
P.S.: J'avais déjà essayé avec le overflow:hidden mais cela ne faisait rien.

Si si, cela fonctionne très bien.
Sans-doute l'as-tu mal appliqué, mais difficile de le deviner Smiley decu
Salut à tous !

Je suis débutant en developpement Web et je rencontre le même problème sur IE6 Smiley bawling . J'utilise la même méthode que MacFr (div dans td), car j'ai lu sur le forum que l'overflow appliqué sur les TD ne fonctionne pas.

J'ai essayé avec un tableau tout simple et ça ne fonctionne pas.


<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<style type="text/css">
div{
        width: 100%;
        overflow: hidden;
}
</style>
</head>
<body>
<table border="1" width="10%">
<tr>
        <td width="5%">
                <div class="pb">TESTABCDEFGHIJKL</div>
        </td>
        <td width="5%">
                <div class="pb">TEST</div>
        </td>
</tr>
<tr>
        <td width="5%">
                <div class="pb">TEST</div>
        </td>
        <td width="5%">
                <div class="pb">TEST</div>
        </td>
</tr>
</table>
</body>
</html>


Sur firefox ça fonctionne nickel !

Quand je passe les dimensions du tableau et des colonnes en taille fixe (ce que je ne veux pas à la base) ça me donne un autre type d'erreur su IE6.
L'overflow fonctionne bien sur le div, mais ma colonne prend la taille de la chaine "TESTABCDEFGHIJKL"!!!

Sur firefox toujours pas de problème.

 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<style type="text/css">
div{
        width: 100%;
        overflow: hidden;
}
</style>
</head>
<body>
<table border="1" width="100px">
<tr>
        <td width="50px">
                <div class="pb">TESTABCDEFGHIJKL</div>
        </td>
        <td width="50px">
                <div class="pb">TEST</div>
        </td>
</tr>
<tr>
        <td width="50px">
                <div class="pb">TEST</div>
        </td>
        <td width="50px">
                <div class="pb">TEST</div>
        </td>
</tr>
</table>
</body>
</html>


Le seul moyen que j'ai trouvé pour que ça fonctionne c'est de passer la taille du div en fixe avec la même largeur que pour le td.
 
<style type="text/css">
div{
        width: 50px;
        overflow: hidden;
}
</style>


Est ce que c'est un bug de IE6 ? Si oui, y a t'il une parade ?

Merci d'avance pour vos réponses.
Bonjour,

ce sujet a été traité maintes fois sur ce forum sous le "syndrôme du Supercalifragilisticexpialidocius"
mais dans mon cas, je dois faire un menu gauche avec des mots allemands. Ces derniers sont relativement longs et il n'y a pas d'espace pour provoquer le retour à la ligne.

ci-dessous un morceau de code avec une largeur de menu volontairement réduite à 60px pour bien visuliaser le problème.
Sous IE7 et FF ça déborde et sous IE6 ça étire le menu

Dans le code réel c'est un peu plus large 140px, mais avec un Treeview qui accentue encore plus le problème.

est-il possible que les mots longs passent à la ligne même sans espace ?



<style type="text/css">
body {
margin: 0px;
font-size: 11px;
font-family: verdana;
text-decoration:none;
}
a:link {text-decoration: none;}
a:visited {text-decoration: none}
a:active {text-decoration: none}
a:hover {text-decoration: underline;}

ul {
width:60px;
border: 1px solid red;
margin:0;
padding:0px 0px 0px 20px;
}
li {
padding-left:0px;
}

</style>


</head>

<body>

<ul>
<li><a href="/">Radios mit Kassettendeck & CD-Player</a></li>
<li><a href="/">Kabellose Bildübertragungen</a></li>
</ul>


</body>
</html>
Sujet clos
Aller à