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

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

输出:

hello
How are you

当前回答

<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

其他回答

Vincent Robert和Joey Adams的答案都是正确的。但是,如果您不想更改标记,可以使用javascript插入一个<br />。

在CSS中,不改变标记是无法做到这一点的。

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

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

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

例如,您可以添加大量的填充和强制文本拆分到新行

p {
  padding-right: 50%;
}

对我来说,在响应式设计的情况下工作得很好,只有在一定的宽度范围内,文本才需要被分割。

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

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

如果这能帮助到某人…

你可以这样做:

<p>This is an <a class="on-new-line">inline link</a>?</p>

用这个css:

a.on-new-line:before { 
  content: '&nbsp;'; 
  font-size:0; 
  display:block;
  line-height:0;
}