出力：

こんにちは
お元気ですか

コード：

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

なしで同じ出力を達成するにはどうすればよい<br>ですか？

同じHTML構造では不可能です。Helloとを区別するためのものが必要How are youです。

span（<div>実際と同じように）ブロックとして表示するsを使用することをお勧めします。

p span {
  display: block;
}

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

を使用white-space: pre;して、要素をのよう<pre>に動作させ、改行を保持できます。例：

p {
  white-space: pre;
}

<p>hello 
How are you</p>

IEについては、これはIE8 +でのみ機能することに注意してください。

<br/>通常どおり使用しますが、不要な場合は非表示にしdisplay: noneます。

この質問を見つけたほとんどの人は、CSS /レスポンシブデザインを使用して、特定の場所に改行が表示されるかどうかを判断することを期待しています。（そして個人的なものは何もありません<br/>）

すぐにはわかりませんが、実際にタグを適用display:noneし<br/>て非表示にすることができます。これにより、セマンティックBRタグと組み合わせてメディアクエリを使用できます。

 <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)
    }
 }

これは、正確な区切りでテキストを強制的に2行にするレスポンシブデザインで役立ちます。

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

空白と改行の処理を定義するためのいくつかのオプションがあります。たとえば<p>タグにコンテンツを配置できる場合、必要なものを簡単に取得できます。

以下のための改行ではなく空白の保存使用pre-line（ないpre中など）：

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

<p>hello
How are you</p>

別の動作が必要な場合は、次のいずれかを選択してください（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 */

出典：W3 Schools

の CSS「\ a」コマンドはキャリッジリターンを生成します。これはCSSではなくHTMLなので、必要なものに近くなります。余分なマークアップはありません。

以下の例では、ブロック引用符でタイトルとソースリンクの両方を表示し、キャリッジリターン（"\a"）で2つを区切ります。

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

CSSでコードを使用する

p {
    white-space: pre-line;
}

このコードcssを使用すると、Pタグ内のすべての入力がhtmlのブレークラインになります。

これまで述べてきたことを踏まえて、これは機能する純粋なCSSソリューションです。

<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> <--------------------------------------

または

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

ソース：https : //stackoverflow.com/a/36191199/2377343

要素に改行を入れるには、次のように割り当てます。

display:block;

ブロックレベル要素の後の非浮動要素は次の行に表示されます。<p>や<div>などの多くの要素はすでにブロックレベルの要素なので、そのまま使用できます。

しかし、これは知っておくと良いことですが、これはコンテンツのコンテキストにより大きく依存します。あなたの例では、改行を強制するためにCSSを使用したくないでしょう。意味的には、pタグが表示するテキストに最も適切であるため、<br />が適切です。CSSをハングアップさせるだけのマークアップを追加する必要はありません。技術的にはそうではありません正確に段落が、ない<挨拶>タグがありませんので、あなたが持っているものを使用します。HTMLとよくあなたのコンテンツを記述する方法がより重要である-あなたが持っていることの後に、その後それはかなり見えるようにする方法を見つけ出します。

ここに悪い質問に対する悪い解決策がありますが、文字通り概要に出会うものです：

p {
    width : 12ex;
}

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

リンク一覧

その他の回答は、状況に応じて、改行を追加するいくつかの良い方法を提供します。ただし、:afterセレクターは、リンクのリストに対するCSS制御のためにこれを行うためのより良い方法の1つであることに注意してください。、下記の理由により（および同様のもの）。

目次を想定した例を次に示します。

<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>

そして、これがSimon_Weaverのテクニックです。これはよりシンプルで互換性があります。それはスタイルとコンテンツをそれほど分離せず、より多くのコードを必要とし、事実の後に改行を追加したい場合があるかもしれません。ただし、特に古い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>

上記のソリューションの利点に注意してください。

• HTMLの空白に関係なく、出力は同じです（vs. pre）
• 要素に余分なパディングは追加されません（NickGの display:blockコメントを）
• スタイルを変更するためにすべてのHTMLファイルにアクセスすることなく、いくつかの共有CSSを使用して、リンクの水平リストと垂直リストを簡単に切り替えることができます。
• いいえfloatまたはclear周囲のコンテンツに影響するスタイル
• スタイルはコンテンツとは別です（<br/>またはpreハードコードされた改行付き）
• これは、ルーズリンクでも使用できます。 a.toc:after、および<a class="toc">
• 複数の区切りを追加したり、プレフィックス/サフィックステキストを追加することもできます

多分誰かが私と同じ問題を抱えているでしょう：

と一緒に要素display: flexを使用していたため、使用する必要がありましたflex-direction: column。

設定brにタグをdisplay: noneと便利ですが、WordsRunTogetherになってしまう可能性があります。代わりに、次のように、スペース文字に置き換える方が便利だと思います。

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: ' ';}
}

どの程度<pre>のタグ？

ソース：http : //www.w3schools.com/tags/tag_pre.asp

たとえば、多くのパディングを追加して、テキストを強制的に新しい行に分割できます。

p{
    padding-right: 50%;
}

レスポンシブデザインの場合、テキストを分割するために必要な特定の幅の範囲内でのみ問題なく機能しました。

私は非常にシンプルなソリューションが好きです、これがもう1つあります

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

とCSS

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

overflow-wrap：break-word;を使用します。お気に入り ：

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

内でコンテンツを宣言する必要があります<span class="class_name"></span>。その後、行は中断されます。

\A 改行文字を意味します。

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

ビンセントロバートとジョーイアダムスの両方の回答が有効です。ただし、マークアップを変更したくない場合は、<br /> JavaScriptを使用して。

マークアップを変更せずにCSSでそれを行う方法はありません。

私の場合、入力ボタンの前に改行を入れる必要がありました。
次のスタイルをボタンに適用しましたが、うまくいきました。

clear:both;

これが誰かを助ける場合...

あなたはこれを行うことができます：

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

このCSSで：

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

 スペースの代わりに使用すると、改行が防止されます。

<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>

これはChromeで機能します。

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

ブレークポイントは常に改行されるため、ブレークポイントを使用したくないと思います。あれは正しいですか？もしそうなら<br />、あなたのテキストにブレークポイントを追加するのはどう<br class="hidebreak"/>ですか、それからあなたにそれを非表示にするためにブレークしたいサイズのすぐ上のメディアクエリを使用するようなクラスをそれに与えます<br />特定の幅でブレークするが、その幅より上にインラインのままであるようにます。

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/

コードは

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

CSSは

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

しないでください。強制改行が必要な場合は、改行してください。