Trucsweb.com

Trucsweb 1997-2017 - 20 ans de partage.

HTML

Mise en forme du texte HTML

RDFFav

Le saut de ligne simple - Mise en forme du texte, la balise BR et CLEAR

Rarissime, cette balise ne demande pas à être fermée. La balise BR est très utile, elle permet de changer de ligne. Un document HTML est interprété du haut vers le bas. Toutes les informations s’ajoutent les unes après les autres et changent de ligne une fois le bord de la table ou de la fenêtre atteint. Utilisez la balise BR pour forcer un sauhtml, balise, tag, br, clear, all, right, left, saut, ligne format, forme, texte, style, br, br clear

  • · Niveau : DÉBUTANT
  • · Compatibilité : Tous les navigateurs

Rarissime, cette balise ne demande pas à être fermée. La balise <br /> est très utile, elle permet de changer de ligne. Un document HTML est interprété du haut vers le bas. Toutes les informations s’ajoutent les unes après les autres et changent de ligne une fois le bord de la table ou de la fenêtre atteint. Utilisez la balise <br /> pour forcer un saut de ligne et ainsi produire un document plus agréable à lire.

Note XHTML : Notez qu’il faut ajouter la barre oblique, qui indique normalement la balise de fermeture, directement dans la balise <br />.

L’ATTRIBUT CLEAR (Obsolète depuis HTML4.01 et incompatible HTML5)
Permet plusieurs sauts de ligne en même temps jusqu’à ce qu’il n’y ait plus d’élément de mise en forme à gauche ou à droite. Par exemple si vous avez une image moyennement grande suivie de la balise <br />. Le texte sautera une ligne mais sera encore à côté de l’image. En utilisant l’attribut CLEAR, le saut de ligne s’effectuera sous l’image.

Il y a 3 valeur pour l’attribut CLEAR :

<BR CLEAR=""all"">
<BR CLEAR=""left"">
<BR CLEAR=""right"">

"all" est pour tous les éléments tant à droite qu’à gauche. "left" pour les éléments à gauche et "right" pour les éléments à droite. Si vous avez deux images sur la même ligne par exemple et que vous vouliez sauter de ligne entre les deux images mais seulement sous celle de droite. Vous utiliseriez <BR CLEAR=""right"">.

NOTE : La balise <br /> n’est affectée par aucune autre balise et elle n’affecte en rien les autres balises. Elle est complètement isolée. Par contre la balise <br /> est interprétée seulement entre deux textes ou avant un texte. Si votre texte est le dernier du document ou d’une cellule de table, elle ne sera pas interprétée par certains navigateurs, et ce même si vous ajoutez un espace. Pour régler ce menu problème, ajoutez le code ACSII d’un espace (caractère spécial) :

EXEMPLE :

Votre texte…<br />Votre texte…

RÉSULTAT :

Votre texte…
Votre texte…

» Suite Empêcher le saut de ligne automatique

Django (Oznog) Blais
Dernière mise à jour :

Commentaires

  • Merci pour cette astuce, mais aujourd'hui il faut plutôt compter sur le css, non ? mais avec un br c'est vrai que c'est plus rapide.
    64x64
    Xavier

    Date (GMT) : 2017-04-12 12:19:23 (UTC +0000)
    • Maudite bonne question. C'est vrai qu'on abuse souvent des BR, un fourre tout. Mais non, ça n'a rien avoir avec le CSS. C'EST UN SAUT DE LIGNE, pas un espacement! On peut spécifier la marge d'un élément, par exemple un paragraphe, au lien d'ajouter des <BR /> c'est vrai que la marge CSS (margin:...px) fait la même chose en mieux dans ce cas. Mais forcer un saut de ligne dans un texte à l'intérieur d'un paragraphe en CSS? Comment faire un saut de ligne sans balises? On peut tout reproduire en CSS avec une balise DIV et un SPAN. Les balises HTML ont toutes un style CSS par défaut qu'on peut donc reproduire. Mais si le HTML vient avec des balises, aussi bien les utiliser. L'important et de SÉPARER LE STYLE DE LA STRUCTURE (et du contenu). Un saut de ligne n'est pas considéré comme du style, mais bien comme un élément de structure invariable. D'autre part, le HTML5 mise énormément sur la sémantique. Reproduire un saut de ligne en CSS, il faudrait utiliser une autre balise comme <span>. Qui n'a rien de sémantique par rapport au très français <BR /> ; -) Sinon, il existe effectivement des propriétés CSS pour jouer à ce niveau, par exemple « line-break » pour le japonais ou le chinois. Ou encore « word-break »... Mais un saut de ligne BR est en fait un simple bloc. Il suffit d'ajouter un bloc après un élément pour reproduire le saut de ligne BR. element:after { display: block; content: ""; } Ou encore <p>Mon texte avec un saut <span class="monBR"></span>de ligne</p> p span.monBR { display: block; } C'est un peu tordu non? Il y a un tuto très intéressant sur le sujet : « Injecting a Line Break » par Chris Coyier https://css-tricks.com/injecting-line-break/ Ciao
      64x64
      oznog
      http://www.trucsweb.com
      Date (GMT) : 2018-01-12 12:53:10 (UTC +0000)
      Date local : Fri Jan 12 2018 07:54:08 GMT-0500 (Est)


    • Très simple, bonne explication merci
      64x64
      Dezled

      Date (GMT) : 2017-06-19 12:16:57 (UTC +0000)

      • Merci mais pour sauter 2 lignes en même temps y a t il une balise ?
        64x64
        jeremy
        http://www.belladresse.fr
        Date (GMT) : 2018-01-12 07:13:17 (UTC +0000)
        Date local : Fri Jan 12 2018 08:14:16 GMT+0100 (CET)
        • Salut Jérémy, Pour un spécialiste en marketing et concepteur de site Web, ta question ressemble davantage à un placement publicitaire. « Facteur 3 La notoriété - Google adore que le lien de votre article/page/blog soit cité dans d’autres sites. C’est ce que nous appelons les hyperliens... » Un lien réciproque ça se construit mon vieux! Enfin, tu poses au moins une question qui mérite une réponse pour la communauté! Un saut de ligne, c'est un « break line » <br /> et un paragraphe <p> ajoute un espace entre les paragraphes, comme s'il y avait 2 <br />. Sinon, il y a le CSS pour ajouter une marge en haut ou en bas d'un élément. <br style="margin-top:30px;" />
          64x64
          oznog
          http://www.trucsweb.com
          Date (GMT) : 2018-01-12 12:10:12 (UTC +0000)
          Date local : Fri Jan 12 2018 07:11:10 GMT-0500 (Est)


               Visites : 142476 - Pages vues : 174678
        X

        Trucsweb.com Connexion

        X

        Trucsweb.com Mot de passe perdu

        X

        Trucsweb.com Conditions générales

        Conditions

        Responsabilité

        La responsabilité des Trucsweb.com ne pourra être engagée en cas de faits indépendants de sa volonté. Les informations mises à disposition sur ce site le sont uniquement à titre purement informatif et ne sauraient constituer en aucun cas un conseil ou une recommandation de quelque nature que ce soit.

        Aucun contrôle n'est exercé sur les références et ressources externes, l'utilisateur reconnaît que les Trucsweb.com n'assume aucune responsabilité relative à la mise à disposition de ces ressources, et ne peut être tenue responsable quant à leur contenu.

        Droit applicable et juridiction compétente

        Les règles en matière de droit, applicables aux contenus et aux transmissions de données sur et autour du site, sont déterminées par la loi canadienne. En cas de litige, n'ayant pu faire l'objet d'un accord à l'amiable, seuls les tribunaux canadien sont compétents.

        X

        Trucsweb.com Trucsweb

        X

        Trucsweb.com Glossaire

        X

        Trucsweb.com Trucsweb

        X

        Trucsweb.com Trucsweb

        Conditions

        Aucun message!

        Merci.

        X
        Aucun message!
        X

        Trucsweb.com Créer un compte