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

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

输出:

hello
How are you

当前回答

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

clear:both;

其他回答

我喜欢非常简单的解决方案,这里还有一个:

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

和CSS:

p {
  display: flex;
  flex-direction: column;
}

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

宽度: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 {
    width : 12ex;
}

p:before {
    content: ".";
    float: right;
    padding-left: 6ex;
    visibility: hidden;
}

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

clear:both;

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

p {
  padding-right: 50%;
}

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