使用,而不是空格将防止中断。

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

CSS中的“\a”命令生成一个回车。这是CSS，不是HTML，所以它应该更接近你想要的:没有额外的标记。

在一个blockquote中，下面的例子同时显示标题和源链接，并用回车符("\a")分隔两者:

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

要使元素在后面有换行符，为它赋值:

显示:块;

块级元素之后的非浮动元素将在下一行出现。许多元素，如<p>和<div>已经是块级元素，所以您可以只使用它们。

But while this is good to know, this really depends more on the context of your content. In your example, you would not want to use CSS to force a line break. The <br /> is appropriate because semantically the p tag is the the most appropriate for the text you are displaying. More markup just to hang CSS off it is unnecessary. Technically it's not exactly a paragraph, but there is no <greeting> tag, so use what you have. Describing your content well with HTMl is way more important - after you have that then figure out how to make it look pretty.

有几个选项可以定义空格和换行符的处理。 如果你可以把内容放在<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学校

<pre>标签呢?

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

基于之前所说的，这是一个工作的纯CSS解决方案。

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