如何实现相同的输出没有<br>?
<p>hello <br> How are you </p>
输出:
hello How are you
如何实现相同的输出没有<br>?
<p>hello <br> How are you </p>
输出:
hello How are you
当前回答
关于css技巧,Chris coyer测试了很多选项,最后一个非常简洁的选项是使用display:table,每个选项都有自己的问题,当你在span上使用background-color时,你会发现!
身体{ 填充:20 px; font-family: 'Open Sans', Sans -serif; } h1 { 粗细:300; 字体大小:24 px; 行高:1.6; 背景:# eee; 填充:20 px; 边框:5px 0 25px 0; text-align:中心; } H1跨度{ 颜色:白色; 粗细:900; } H1跨度{ 背景:黑色; 填充:1px 8px; 显示:表; 保证金:汽车; } < h1类= " 1 " > 稍后休息 < span > 在此之前 < / span > < / h1 >
在这里你可以看到codeen上的所有其他选项:
注入换行符
其他回答
这适用于Chrome浏览器:
p::after {
content: "-";
color: transparent;
display: block;
}
你可以使用空格:pre;使元素像<pre>一样,保留换行符。例子:
p { 空白:前; } < p >你好 </p>
注意,对于IE,这只适用于IE8+。
在我的例子中,我需要一个输入按钮前面有一个换行符。 我应用如下样式的按钮,它工作:
clear:both;
在CSS中使用代码
p {
white-space: pre-line;
}
使用这种CSS, P标签内的每个输入都将是HTML中的一个断行。
要使元素在后面有换行符,为它赋值:
显示:块;
块级元素之后的非浮动元素将在下一行出现。许多元素,如<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.