输出：

你好
你好吗

码：

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

没有相同的输出，如何实现<br>？

使用相同的HTML结构是不可能的，您必须有一些区别Hello和How are you。

我建议使用spans，然后将其显示为块（就像<div>实际一样）。

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

这在响应式设计中很有用，在该设计中，您需要在确切的时间点将文本强制分成两行。

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

有几个选项可用于定义空白和换行符的处理。如果可以将内容放入<p>标签中，则很容易获得所需的内容。

为了保留换行符，但不保留空格，请使用pre-line（not 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学校

CSS中的“ \ a”命令生成回车符。这是CSS，而不是HTML，因此它将更接近您想要的：没有额外的标记。

在blockquote中，下面的示例显示标题和源链接，并用回车符（"\a"）分隔两者：

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强制换行。<br />是适当的，因为在语义上p标记最适合您显示的文本。仅仅为了将CSS挂起就不需要更多标记。从技术上讲，它不完全是一个段落，但是没有<greeting>标记，因此请使用已有的标记。用HTMl很好地描述您的内容更为重要-在拥有内容之后，再弄清楚如何使其看起来更漂亮。

这是一个错误问题的不好解决方案，但实际上符合简要要求：

p {
    width : 12ex;
}

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

有关链接列表

其他答案根据情况提供了一些添加换行符的好方法。但应注意的是，:after选择器是对链接列表进行CSS控制的更好方法之一出于以下原因（及类似内容）之一。

这是一个示例，假设有一个目录：

<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中的空格如何，输出都是相同的（与 pre）
• 没有向元素添加额外的填充（请参见NickG的 display:block注释）
• 您可以使用一些共享的CSS轻松地在水平和垂直链接列表之间切换，而无需进入每个HTML文件进行样式更改
• 否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%;
}

在响应式设计的情况下，对我来说效果很好，其中仅在一定的宽度范围内才需要拆分文本。

我喜欢非常简单的解决方案，这里还有一个

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

和CSS

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

使用溢出包装：断字；喜欢 ：

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

您需要在中声明内容<span class="class_name"></span>。在它之后，行将被中断。

\A 表示换行符。

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

文森特·罗伯特（Vincent Robert）和乔伊·亚当斯（Joey Adams）的答案都是有效的。但是，如果您不想更改标记，则只需插入一个<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;
 }

别。如果要硬线中断，请使用一个。