production:

Bonjour
Comment ça va

code:

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

Comment obtenir la même sortie sans <br>?

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

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

p span {
  display: block;
}

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

Vous pouvez utiliser white-space: pre;pour que les éléments agissent comme <pre>, ce qui préserve les retours à la ligne. Exemple:

p {
  white-space: pre;
}

<p>hello 
How are you</p>

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

Utilisez <br/>comme d'habitude, mais cachez-le avecdisplay: none quand vous ne le voulez pas.

Je m'attends à ce que la plupart des personnes qui trouvent cette question souhaitent utiliser 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 cela ne soit pas immédiatement évident, vous pouvez réellement appliquer display:noneà une <br/>balise pour la masquer, ce qui permet l'utilisation de requêtes multimédias 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)
    }
 }

Ceci est utile dans la conception réactive où vous devez forcer le texte en deux lignes à la rupture exacte.

http://jsfiddle.net/nNbD3/1/

Il existe plusieurs options pour définir la gestion des espaces blancs et des sauts de ligne. Si l'on peut mettre le contenu par exemple dans une <p>balise, il est assez facile d'obtenir tout ce que l'on veut.

Pour conserver les sauts de ligne mais pas les espaces blancs, utilisez pre-line(pas pre) comme dans:

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

<p>hello
How are you</p>

Si un autre comportement est souhaité, choisissez parmi l'un d'eux (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: Écoles W3

La commande "\ a" en CSS génère un retour chariot. C'est du CSS, pas du HTML, donc il sera plus proche de ce que vous voulez: pas de balisage supplémentaire .

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

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

Au CSS utiliser le code

p {
    white-space: pre-line;
}

Avec ce code css, chaque entrée à l'intérieur de la balise P sera une ligne de rupture au html.

S'appuyant sur ce qui a été dit précédemment, il s'agit d'une solution CSS pure qui fonctionne.

<style>
  span {
    display: inline;
  }
  span:before {
    content: "\a ";
    white-space: pre;
  }
</style>
<p>
  First line of text. <span>Next line.</span>
</p>

<pre> <---------------------------------------
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
</pre> <--------------------------------------

OU

<div style="white-space:pre">  <-----------------------------------
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
</div>                         <-----------------------------------

source: https://stackoverflow.com/a/36191199/2377343

Pour qu'un élément ait un saut de ligne par la suite, affectez-le:

display:block;

Les éléments non flottants après un élément de niveau bloc apparaîtront sur la ligne suivante. De nombreux éléments, tels que <p> et <div> sont déjà des éléments de niveau bloc, vous pouvez donc simplement les utiliser.

Mais bien que cela soit bon à savoir, cela dépend vraiment davantage du contexte de votre contenu. Dans votre exemple, vous ne voudriez pas utiliser CSS pour forcer un saut de ligne. Le <br /> est approprié car sémantiquement la balise p est la plus appropriée pour le texte que vous affichez. Plus de balisage juste pour suspendre CSS, c'est inutile. Techniquement, ce n'est pas exactement un paragraphe, mais il n'y a pas de balise <greeting>, alors utilisez ce que vous avez. Bien décrire votre contenu avec HTMl est beaucoup plus important - après avoir cela, alors découvrez comment le rendre joli.

Voici une mauvaise solution à une mauvaise question, mais qui répond littéralement au mémoire:

p {
    width : 12ex;
}

p:before {
    content: ".";
    float: right;
    padding-left: 6ex;
    visibility: hidden;
}

Pour une liste de liens

Les autres réponses fournissent de bons moyens d'ajouter des sauts de ligne, selon la situation. Mais il convient de noter que le :aftersélecteur est l'un des meilleurs moyens de le faire pour le contrôle CSS des listes de liens (et des choses similaires), pour les raisons indiquées ci-dessous.

Voici un exemple, en supposant une table des matières:

<style type="text/css">
    .toc a:after{ content: "\a"; white-space: pre; }
</style>

<span class="toc">
    <a href="#a1">Item A1</a> <a href="#a2">Item A2</a>
    <a href="#b1">Item B1</a> <a href="#b2">Item B2</a>
</span>

Et voici la technique de Simon_Weaver, qui est plus simple et plus compatible. Il ne sépare pas autant le style et le contenu, nécessite plus de code et il peut y avoir des cas où vous souhaitez ajouter des sauts après coup. Pourtant, c'est une excellente solution, en particulier pour les anciens IE.

<style type="text/css">
    .toc br{ display: none; } /* comment out for horizontal links */
</style>

<span class="toc">
    <a href="#a1">Item A1</a><br/> <a href="#a2">Item A2</a><br/>
    <a href="#b1">Item B1</a><br/> <a href="#b2">Item B2</a><br/>
</span>

Notez les avantages des solutions ci-dessus:

• Peu importe l'espace dans le HTML, la sortie est la même (vs. pre )
• Aucun rembourrage supplémentaire n'est ajouté aux éléments (voir NickG display:block commentaires )
• Vous pouvez facilement basculer entre les listes horizontales et verticales de liens avec du CSS partagé sans entrer dans chaque fichier HTML pour un changement de style
• Non floatouclear styles affectant le contenu environnant
• Le style est distinct du contenu (vs. <br/>, oupre avec des pauses codées en dur)
• Cela peut également fonctionner pour les liens lâches en utilisant a.toc:after et<a class="toc">
• Vous pouvez ajouter plusieurs sauts et même un préfixe / suffixe

Peut-être que quelqu'un aura le même problème que moi:

J'étais dans un élément avec display: flexdonc je devais l'utiliser flex-direction: column.

Définition d'une brbalise surdisplay: none est utile, mais vous pouvez vous retrouver avec WordsRunTogether. Je l'ai trouvé plus utile de le remplacer par un espace, comme ceci:

HTML:

<h1>
    Breaking<br />News:<br />BR<br />Considered<br />Harmful!
</h1>

CSS:

@media (min-device-width: 1281px){
    h1 br {content: ' ';}
    h1 br:after {content: ' ';}
}

Et le <pre>tag?

source: http://www.w3schools.com/tags/tag_pre.asp

Vous pouvez ajouter beaucoup de remplissage et forcer le texte à être divisé en nouvelle ligne, par exemple

p{
    padding-right: 50%;
}

A bien fonctionné pour moi dans une situation avec un design réactif, où seulement dans une certaine plage de largeur, il fallait que le texte soit divisé.

J'aime les solutions très simples, voici la plus

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

et css

p {
 display: flex;
 flex-direction: column;
}

Utilisez overflow-wrap: break-word; comme :

.yourelement{
overflow-wrap: break-word;
}

Vous devez déclarer le contenu à l'intérieur <span class="class_name"></span>. Après cela, la ligne sera rompue.

\A signifie caractère de saut de ligne.

.class_name::after {
  content: "\A";
  white-space: pre;
}

Les réponses de Vincent Robert et Joey Adams sont valides. Si vous ne souhaitez cependant pas modifier le balisage, vous pouvez simplement insérer un<br /> utilisant javascript.

Il n'y a aucun moyen de le faire en CSS sans changer le balisage.

Dans mon cas, j'avais besoin d'un bouton d'entrée pour avoir un saut de ligne avant.
J'ai appliqué le style suivant au bouton et cela a fonctionné:

clear:both;

Au cas où cela aiderait quelqu'un ...

Vous pouvez faire ceci:

<p>This is an <a class="on-new-line">inline link</a>?</p>

Avec ce css:

a.on-new-line:before { 
  content: ' '; 
  font-size:0; 
  display:block;
  line-height:0;
}

L'utilisation  au lieu d'espaces empêchera une pause.

<span>I&nbsp;DONT&nbsp;WANT&nbsp;TO&nbsp;BREAK&nbsp;THIS&nbsp;LINE&nbsp;UP, but this text can be on any line.</span>

Cela fonctionne dans Chrome:

p::after {
    content: "-";
    color: transparent;
    display: block;
}

Je suppose que vous ne vouliez pas utiliser un point d'arrêt, car cela rompra toujours la ligne. Est-ce exact? Si c'est le cas, que diriez-vous d'ajouter un point d'arrêt <br />dans votre texte, puis de lui donner une classe comme celle d' <br class="hidebreak"/>utiliser la requête multimédia juste au-dessus de la taille que vous souhaitez qu'il casse pour masquer le<br /> afin qu'il se casse à une largeur spécifique mais reste en ligne au-dessus de cette largeur.

HTML:

<p>
The below line breaks at 766px.
</p>

<p>
 This is the line of text<br class="hidebreak"> I want to break.
</p>

CSS:

@media (min-width: 767px) {
  br.hidebreak {display:none;}
}

https://jsfiddle.net/517Design/o71yw5vd/

Le code peut être

<div class="text-class"><span>hello</span><span>How are you</span></div>

CSS serait

.text-class {
     display: flex;
     justify-content: flex-start;
     flex-direction: column;
     align-items: center;
 }

Non. Si vous voulez un saut de ligne dur, utilisez-en un.