[CSS] Forcé retour à la ligneFermé

Question

Bonsoir,

Savez vous comment faire pour forcé le retour à la ligne d'un texte dans un div, car j'ai un div de taille max-width de 510px mais si j'entre un mot super grand, celui çi va débordé du div mais je voudrais forcé un retour à la ligne dans ce cas, est ce faisable en CSS ou faut-il passer par un script ?


D'avance merci :)

GreenDay-punkweapon · Accepted Answer

J'ai trouver cette proprité (par contre je n'arrive pas bien à la faire marcher). Essaie et dit si ça marche white-space normal : le passage à la ligne est automatique (par défaut) nowrap : pas de passage à la ligne automatique, à moins qu'une balise xHTML comme
ne soit présente. pre : le passage à la ligne se fait tel que le texte a été saisi dans le code source (comme la balise xHTML

Utilisateur anonyme · Answer

si tu fai une marge intérieur avec padding sa devrai marcher non ?


   padding: 5px;

aKuma59 · Answer

Heuuuu nop ça ne fonctionne pas...
Ce que je voudrais c'est que lorsque le mot est trop grand pour être affiché dans mon div je voudrais qu'il ce coupe à la limite du div et affiche le reste à la ligne d'en dessous.
Je sais pas si c'est assez clair... :x

Utilisateur anonyme · Answer

bah moi jai ce code, et ça me met un retour a la ligne quand le texte en trop grand :



body
{
   width: 760px;
   margin: auto;
   margin-top: 20px;
   margin-bottom: 20px;    
   background-color: #000000;
}



#mid
{

   margin-bottom: 20px;
   padding: 5px;

   color: #990000;
   background-color: #000000;

   width: 760ox;
   height: auto;
   background-image: url("image2/back.png");
   background-repeat: no-repeat;   

   border: 0px solid white;
}

aKuma59 · Answer

le problème n'est pas le texte en lui même, mes mots retourne à la ligne automatiquement.

Le problème est que si l'utilisateur entre un mot trop grand celui çi va dépasser...

Fygau · Answer

Je cherche à faire un retour à la ligne automatique dans un div
tel que l'a expliqué l'auteur de ce post.

Le paramètre "word-wrap:break-word;" est adapté pour Internet Explorer 8.0 mais pas pour la version 3.0.14 de Firefox. 
Y a t'il un code qui puisse être compatible pour les 2 navigateurs pour faire un retour à la ligne automatique?

Merci de votre aide.
Fabien

eblin · Answer

Bonjour à tous,

y a t'il une solution à ce problème? 

Parceque word-wrap:break-word;  ne marche pas sous firefox 3.5.9...

J'ai beau chercher sur les forums, je ne vois que des gens qui pose la question mais jamais de solution...

Merci d'avance

jo3lefou · Answer

met un <BR>... ;)

zenzla · Answer

???

txiki · Answer

Salut à tous,
Le retour ne se fera que s'il y a un blanc, je m'explique: 
- Si le mot est long (ils ne sont pas si nombreux que ça dans la langue française, anticonstitutionnellement est le plus grand à ma connaissance), il rentre dans le div ou il ne rentre pas. Dans ce cas la dimension de la div trop petite pour le nombre de caractères. Si anticonstitutionnellement n'entre pas dans ta div, c'est que tu a choisi une police trop grande, une taille de police trop grande. Donc tu réduis la taille de ta police ou tu agrandi la largeur de ta div.
- Si ce mot long est précédé d'autres mots, il devrait normalement s'afficher en dessous des autres (ceux qui le précède).
Le retour à la ligne, dans un div, est automatique. Si ce n'est pas le cas, c'est que ton mot est trop long par rapport à la largeur du div.
Je ne sais pas si je me fais comprendre....
Mais 510px c'est déja assez grand pour qu'un mot, même long, entre dedans.
Ou alors tu parle des blancs inégaux sur la partie droite du div ? Car le texte est aligné à gauche.
Si tu choisi une justification du texte, les blancs à droites seront tous égaux mais ce seront les espaces entre les caractères qui seront modifiés (et ça fera très vilain à l'affichage).

Le bonheur est la seule chose que l'on peut donner sans l'avoir.

xloadx · Answer

Il existe une réponse pour le saut de ligne avec WHITE-SPACE: white-space: pre; ou white-space: pre-line; ou white-space: pre-wrap; En fait tout dépend du contenu de ton conteneur de base traduit en CSS par ce genre d'expression pour une classe [class] (.) ou un objet [id] (#) : div.objet{ white-space: pre-line; } ou bien div#objet{ white-space: pre-line; } Si vous ne connaissez pas bien le maniement des arguments de balises pour le CSS voici un petit exemple:

Ligne 1 Ligne 2 Ligne 3

Floriane · Answer

J'ai trouvé ce code sur un autre site, si ça peut aider quelqu'un d'autre.

pre {
 white-space: pre-wrap;       /* css-3 */
 white-space: -moz-pre-wrap !important;  /* Mozilla, since 1999 */
 white-space: -pre-wrap;      /* Opera 4-6 */
 white-space: -o-pre-wrap;    /* Opera 7 */
 word-wrap: break-word;       /* Internet Explorer 5.5+ */
 width: 99%;
}

for_help · Answer

Au prochain qui lira ce sujet, " word-wrap: break-word; " ne fonctionne pas sur les td d'un tableau. Il suffit de mettre une div (avec un max-width) dessous.

Voilà !

milimi · Answer

réponse tardive mais si cela peut aider , une solution un peu barbare pouvant être un peut long suivant la taille du text : //passage du texte dans un tableau $liste= explode(" ", $text); $nbrechar=70; $refac=null; foreach ($liste as $key => $value) { //contrôle de de taille de chaque mot si supérieur à la taille définis if(strlen($value)>$nbrechar) { //On le coupe en plusieurs mots de taille définis et ajoute des sauts à la ligne entre. $refac.=wordwrap($value, $nbrechar, "
",true); } else{ $refac.=' '.$value; } }

GossBow · Answer

Ouah les gars vous gérer pas la !
Alors voila la solution

dans ton css tu met une largeur fixe et la hauteur en auto exemple fichier CSS:

#masuperdiv{
width: 300px;
height: auto;
}

SA MARCHE A 100%

[CSS] Forcé retour à la ligne

15 réponses

Discussions similaires

Newsletters