Comment faire un saut de ligne à partir de css, sans utiliser <br /> ?

Question

sortie :

hello
How are you

code :

<p>hello <br> How are you </p>

Comment obtenir le même résultat sans <br> ?

Answer 1

Impossible avec la même structure HTML, vous devez avoir quelque chose pour distinguer entre Hello y How are you .

Je suggère d'utiliser span que vous afficherez ensuite sous forme de blocs (tout comme un fichier de type <div> en fait).

p span {
  display: block;
}

<p><span>hello</span><span>How are you</span></p>

Answer 2

Vous pouvez utiliser white-space: pre; pour que les éléments agissent comme <pre> qui préserve les nouvelles lignes. Exemple :

p {
  white-space: pre;
}

<p>hello 
How are you</p>

Notez que pour IE, cela ne fonctionne que dans IE8+.

Answer 3

Utilice <br/> comme d'habitude, mais le cacher avec display: none quand vous ne le voulez pas.

Je pense que la plupart des personnes qui se posent cette question veulent utiliser le css / responsive design pour décider si un saut de ligne apparaît ou non à un endroit spécifique. (et n'ont rien de personnel contre <br/> )

Bien que ce ne soit pas immédiatement évident, vous pouvez en fait appliquer display:none à un <br/> pour le masquer, ce qui permet d'utiliser des requêtes média en tandem avec des balises BR sémantiques.

<div>
  The quick brown fox<br />
  jumps over the lazy dog
</div>

@media screen and (min-width: 20em) {
  br {
    display: none; /* hide the BR tag for wider screens (i.e. disable the line break) */
  }
}

Cette fonction est utile dans le cadre d'un design réactif, lorsque vous devez forcer le texte à s'inscrire sur deux lignes à un point de rupture précis.

Exemple de jsfiddle

Answer 4

Il existe plusieurs options pour définir le traitement des espaces blancs et des sauts de ligne. Si l'on peut mettre le contenu dans, par exemple, un fichier de type <p> tag il est assez facile d'obtenir ce que l'on veut.

Para préserver les sauts de ligne mais pas les espaces blancs utiliser pre-line (pas pre ) comme dans :

<style>
 p {
     white-space: pre-line; /* collapse WS, preserve LB */
   }
</style>

<p>hello
How are you</p>

Si vous souhaitez un autre comportement, choisissez l'une de ces options (WS=WhiteSpace, LB=LineBreak) :

     white-space: normal;   /* collapse WS, wrap as necessary, collapse LB */
     white-space: nowrap;   /* collapse WS, no wrapping,       collapse LB */
     white-space: pre;      /* preserve WS, no wrapping,       preserve LB */
     white-space: pre-wrap; /* preserve WS, wrap as necessary, preserve LB */
     white-space: inherit;  /* all as parent element */

SOURCE : W3 Schools

Answer 5

El " \a " en CSS génère un retour chariot. Il s'agit de CSS, pas de HTML, donc cela devrait être plus proche de ce que vous voulez : pas de majoration supplémentaire .

Dans un blockquote Dans l'exemple ci-dessous, vous affichez à la fois le titre et le lien source et vous séparez les deux par un retour chariot ( "\a" ):

blockquote[title][cite]:after {
  content:attr(title)"\a"attr(cite)
}