Discussion :

[bardhamu]

Bonjour,

j'ai un soucis je pense de débutant que je n'arrive pas à résoudre:
j'ai défini les propriétés, police, taille, couleur, etc, d'une balise, nommée h1.
Dans mon code HTML, j'insère cette balise avec du texte dedans dans une DIV de taille fixe, position:absolute. Si la longueur de mon texte est trop longue, j'aimerai que le retour à la ligne se fasse automatiquement pour rester à l'intérieur de la surface définie pour la DIV, plutôt que couper moi-même le texte, refermer ma balise h1, et en ouvrir une autre pour écrire la suite.
Est-ce possible?

[trotters213]

ça se fait automatiquement ça si tu as définis la longueur de ton div.

[MasterOfChakhaL]

Si ton H1 est dans ta div, il faut que tu définisses la position et la taille du conteneur.

Une fois que le conteneur est positionné comme il faut, c'est gagné. tu places ton H1 dans le div.

Le H1 est une balise bloc, elle occupera donc 100% de la place que son conteneur lui propose.

Si tu as des soucis pour positionner les blocs, une astuce toute bête mais incroyablement pratique.
Tu places ceci en début de tes CSS:

Code :

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

* { border:1px solid #f00; }

Ainsi, touts tes éléments seront repérables. Si tu veux repérer un élément particulier, tu peux lui appliquer une couleur de fond ou simplement changer la couleur de la bordure

[bardhamu]

je croyais moi aussi que ça marchait comme ça, mais non...
Voir le source en pièce jointe

[Bisûnûrs]

Fallait préciser qu'il n'y avait pas d'espace dans ton texte, tu n'aurais pas eu deux réponses "inutiles" et ça aurait fait gagner du temps à tout le monde ...

En HTML c'est impossible, tu peux le faire en PHP grâce à la fonction wordwrap().

[trotters213]

Fallait préciser qu'il n'y avait pas d'espace dans ton texte

En effet la réponse aurait était différente

[MasterOfChakhaL]

Tu avoueras qu'il s'agit d"un cas bien particulier. Le mot le plus long de la langue française ne contient que 26 lettres si je ne m'abuse.

En tout cas, tu peux toujours essayer ceci...
tu rajoutes ca dans ton css:

Code :

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

1
2
3
4
5
h1 {
  width: 100%; /*c'est important de définir la largeur a cause de ce qui suit*/
  word-wrap: break-word;
}

Dans ton HTML, tu peux définir l'endroit où le mot peut se couper et retourner à la ligne grâce à l'entité ­.

Code :

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

		<h1>hgjhhgjhgfjff­dggggggddddddddddddddddddd­gggggggggggggggggggggggggg­gggggggggggggggggggggggggg­gggggggggggggggggggggggggg­ggggggggggggggggggggdddd</h1>

Les sauts de ligne sont accompagnés d'un tiret...