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

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

输出:

hello
How are you

当前回答

如果这能帮助到某人…

你可以这样做:

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

其他回答

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

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

设置一个br标记来显示:none是有帮助的,但是你可以用WordsRunTogether结束。我发现用空格字符代替它更有帮助,就像这样:

HTML:

<h1>
    Breaking<br />News:<br />BR<br />Considered<br />Harmful!
</h1>

CSS:

@media (min-device-width: 1281px){
    h1 br {content: ' ';}
    h1 br:after {content: ' ';}
}

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

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

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

不可能使用相同的HTML结构,你必须有一些东西来区分Hello和How are you。

我建议使用span,然后显示为块(实际上就像<div>)。

P跨度{ 显示:块; } <p><span>hello</span><span>How are you</span></p>

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

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