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

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

输出:

hello
How are you

当前回答

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

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

其他回答

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

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

我猜您不希望使用断点,因为它总是会断行。对吗?如果是这样,如何在你的文本中添加一个断点<br />,然后给它一个类,如<br class="hidebreak"/>,然后使用媒体查询右上方的大小,你想要它打破隐藏<br />,所以它打破在一个特定的宽度,但保持内联以上的宽度。

HTML:

<p>
The below line breaks at 766px.
</p>

<p>
 This is the line of text<br class="hidebreak"> I want to break.
</p>

CSS:

@media (min-width: 767px) {
  br.hidebreak {display:none;}
}

https://jsfiddle.net/517Design/o71yw5vd/

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

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

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

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

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>