如何实现相同的输出没有<br>?
<p>hello <br> How are you </p>
输出:
hello How are you
如何实现相同的输出没有<br>?
<p>hello <br> How are you </p>
输出:
hello How are you
当前回答
要使元素在后面有换行符,为它赋值:
显示:块;
块级元素之后的非浮动元素将在下一行出现。许多元素,如<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中的“\a”命令生成一个回车。这是CSS,不是HTML,所以它应该更接近你想要的:没有额外的标记。
在一个blockquote中,下面的例子同时显示标题和源链接,并用回车符("\a")分隔两者:
blockquote[title][cite]:after {
content:attr(title)"\a"attr(cite)
}
基于之前所说的,这是一个工作的纯CSS解决方案。
<style>
span {
display: inline;
}
span:before {
content: "\a ";
white-space: pre;
}
</style>
<p>
First line of text. <span>Next line.</span>
</p>
一个现代而简单的解决方案是这样设置宽度:
宽度: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 >
你可以使用空格:pre;使元素像<pre>一样,保留换行符。例子:
p { 空白:前; } < p >你好 </p>
注意,对于IE,这只适用于IE8+。
不可能使用相同的HTML结构,你必须有一些东西来区分Hello和How are you。
我建议使用span,然后显示为块(实际上就像<div>)。
P跨度{ 显示:块; } <p><span>hello</span><span>How are you</span></p>