有几个选项可以定义空格和换行符的处理。 如果你可以把内容放在<p>标签中，你就很容易得到你想要的东西。

要保留换行符而不保留空格，请使用pre-line(而不是pre)，如in:

<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解决方案。

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

<pre>标签呢?

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

代码可以是:

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

有关链接列表

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