您需要声明<span class="class_name"></span>内的内容。过了它，线就断了。

\A表示换行字符。

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

如果这能帮助到某人…

你可以这样做:

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

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

显示:块;

块级元素之后的非浮动元素将在下一行出现。许多元素，如<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.

使用overflow-wrap: break-word;如:

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

正常使用<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例子

<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