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

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

输出:

hello
How are you

当前回答

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

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

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

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

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

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

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

p {
  padding-right: 50%;
}

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

在我的例子中,我需要一个输入按钮前面有一个换行符。 我应用如下样式的按钮,它工作:

clear:both;