[CSS] Forcé retour à la ligne [Fermé]

Signaler
Messages postés
104
Date d'inscription
samedi 19 juillet 2008
Statut
Membre
Dernière intervention
28 janvier 2018
-
 Loth -
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 :)

15 réponses

Messages postés
83
Date d'inscription
samedi 4 octobre 2008
Statut
Membre
Dernière intervention
27 janvier 2010
54
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 <br /> 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 <pre>)
38
Merci

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 60511 internautes nous ont dit merci ce mois-ci

Impeccable ! Merci bien.
White-space: normal et nowrap ne permettent pas de forcer un retour ligne lorsque il est face à une suite de caractères sans espace: Dans ce cas la taille de l'élément conteneur augmente forcément.
D'ailleurs, cela revient même à ne rien préciser (dans le cas où l'élément n'hérite pas des propriétés parentes), car c'est équivalent à {white-space:normal} par défaut.

Oh pardon!!!

C'est: WORD-BREAK

This property controls the line breaking behavior within words. It is especially useful in cases where multiple languages are used within an element.
Example

div { word-break: keep-all }
<div style="word-break: keep-all">Western character set content mixed with a some Asian char content.</div>
Possible Values
normal Normal line breaking behavior for the language is used.
break-all Useful where content contains a majority of Asian character set content, to which this value behaves like `normal'. Non-Asian character set content may be arbitrarily broken across lines.
keep-all Useful where content contains a minority of Asian character set content, to which content is not broken across lines. For non-Asian character set content, this value behaves like `normal'.
Impécable
Merci beaucoup
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
Ca marche en Firefox 4 merci.
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:

<div class=' objet' id=' objet'>
Ligne 1
Ligne 2
Ligne 3
</div>
Messages postés
3127
Date d'inscription
mercredi 30 janvier 2002
Statut
Contributeur
Dernière intervention
12 octobre 2020
399
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.
rien à voir, et si tu veux poster un lien, n'oublions pas que les messages ne sont pas forcément des mots. Les gens sont un peu foufou, et si c'est une suite de nombre ou bien...?
C'est quand même terrible les gens qui parce qu'ils sont incultes ne répondent pas à la question et se permettent de juger la personne qui pose la question. "si ton mot ne rentre pas dans ton div c'est que ta police est trop grande ou ton div trop petit".? Faut vraiment être barge pour écrire des conneries pareilles.
Répondez à la question ou ne répondez pas.
Sache Txiki quen informatique, il faut avoir l'esprit large, car tous les contenue que l'on affiche ne sont pas forcement des mots de la langue française.
ex pour le quel je suis tombé sur cette discussion: une expression régulière de mail:
CutMail('^([a-z 0-9 A-Z]{1,}([\- \. \_]{1}[a-z 0-9 A-Z]{1,}){0,}){1,}\@([a-z 0-9 A-Z]{1,}([\- \. \_]{1}[a-z 0-9 A-Z]{1,}){0,}){1,}(\.(net|com|edu|fr|us|tw|en|gb|de|ze|be|su)){1,}$', document.forms[0].email.value);
De plus, en constant que l'interface du site a permise que l'éxpresion sans espace c'est cassé au bon endroit pour faire un retour à la ligne, j'ai regardé le css de la page qui contien la solution pour forcer un retour chariot:
- word-wrap: break-word;

Merci aux développeur de "Comment ça marche": Comme ça!

Et Floriane avait aussi la réponse
Messages postés
50
Date d'inscription
jeudi 18 octobre 2012
Statut
Membre
Dernière intervention
27 février 2014
5
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%
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%;
}
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
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à !
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, "<br/>",true);
          }
        else{
          $refac.=' '.$value;
          }

      }

Messages postés
104
Date d'inscription
samedi 19 juillet 2008
Statut
Membre
Dernière intervention
28 janvier 2018
6
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
Messages postés
104
Date d'inscription
samedi 19 juillet 2008
Statut
Membre
Dernière intervention
28 janvier 2018
6
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...

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;
}
met un <BR>... ;)

word-break
break-all apparalent, la non séparartion des mots entiers par défaut, est due au langue Chinois, dont (à ce que j'ai cru compdre) les signes change le sens du mot lorsqu'il sont séparés. (j'admets que c'est flou, mais je ne vois pas d'autre expliciation)

si tu fai une marge intérieur avec padding sa devrai marcher non ?

   padding: 5px;