<pre>标签呢?

来源:http://www.w3schools.com/tags/tag_pre.asp

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

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

和CSS:

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

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

OR

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

来源:https://stackoverflow.com/a/36191199/2377343

你可以使用空格:pre;使元素像<pre>一样，保留换行符。例子:

p { 空白:前; ｝ < p >你好 </p>

注意，对于IE，这只适用于IE8+。

正常使用<br/>，但是当你不需要它时用display: none隐藏它。

我希望大多数发现这个问题的人都想使用css /响应式设计来决定是否在特定的位置出现换行符。(不要对<br/>有任何个人不满)

虽然不是很明显，但实际上可以对<br/>标记应用display:none来隐藏它，这样就可以与语义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) */
  }
}

这在响应式设计中非常有用，在这种设计中，您需要在精确的换行处强制将文本分成两行。

jsfiddle例子

有关链接列表

其他答案根据具体情况提供了一些添加换行符的好方法。但是需要注意的是: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>

注意以上解决方案的优点:

No matter the whitespace in the HTML, the output is the same (vs. pre) No extra padding is added to the elements (see NickG's display:block comments) You can easily switch between horizontal and vertical lists of links with some shared CSS without going into every HTML file for a style change No float or clear styles affecting surrounding content The style is separate from the content (vs. <br/>, or pre with hard-coded breaks) This can also work for loose links using a.toc:after and <a class="toc"> You can add multiple breaks and even prefix/suffix text