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

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

输出:

hello
How are you

当前回答

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

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

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

其他回答

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

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

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

一个现代而简单的解决方案是这样设置宽度:

宽度:min-content;

这个CSS规则主要适用于文本内容,但不仅限于: https://developer.mozilla.org/en-US/docs/Web/CSS/min-content

p { 保证金:20 px; 颜色:# 222; font-family:'世纪哥特式',sans-serif; 边框:2px虚线灰色; 填充:3 px; } .max { 宽度:max-content; } .min { 宽度:min-content; } <!DOCTYPE html > < html lang =“en”> <头/ > <身体> <p class="max">最大宽度</p> <p class="min">最小可用宽度</p> < /身体> < / html >

如果这能帮助到某人…

你可以这样做:

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

我猜您不希望使用断点,因为它总是会断行。对吗?如果是这样,如何在你的文本中添加一个断点<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>