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

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

输出:

hello
How are you

当前回答

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

宽度: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 >

其他回答

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

clear:both;

要使元素在后面有换行符,为它赋值:

显示:块;

块级元素之后的非浮动元素将在下一行出现。许多元素,如<p>和<div>已经是块级元素,所以您可以只使用它们。

But while this is good to know, this really depends more on the context of your content. In your example, you would not want to use CSS to force a line break. The <br /> is appropriate because semantically the p tag is the the most appropriate for the text you are displaying. More markup just to hang CSS off it is unnecessary. Technically it's not exactly a paragraph, but there is no <greeting> tag, so use what you have. Describing your content well with HTMl is way more important - after you have that then figure out how to make it look pretty.

在CSS中使用代码

p {
  white-space: pre-line;
}

使用这种CSS, P标签内的每个输入都将是HTML中的一个断行。

有几个选项可以定义空格和换行符的处理。 如果你可以把内容放在<p>标签中,你就很容易得到你想要的东西。

要保留换行符而不保留空格,请使用pre-line(而不是pre),如in:

<style>
 p {
     white-space: pre-line; /* collapse WS, preserve LB */
   }
</style>

<p>hello
How are you</p>

如果需要另一种行为,请选择其中之一(WS=WhiteSpace, LB=LineBreak):

white-space: normal;   /* collapse WS, wrap as necessary, collapse LB */
white-space: nowrap;   /* collapse WS, no wrapping,       collapse LB */
white-space: pre;      /* preserve WS, no wrapping,       preserve LB */
white-space: pre-wrap; /* preserve WS, wrap as necessary, preserve LB */
white-space: inherit;  /* all as parent element */

资料来源:W3学校

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

宽度: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 >