如何实现相同的输出没有<br>?
<p>hello <br> How are you </p>
输出:
hello How are you
如何实现相同的输出没有<br>?
<p>hello <br> How are you </p>
输出:
hello How are you
当前回答
这适用于Chrome浏览器:
p::after {
content: "-";
color: transparent;
display: block;
}
其他回答
你可以使用空格: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>
您需要声明<span class="class_name"></span>内的内容。过了它,线就断了。
\A表示换行字符。
.class_name::after {
content: "\A";
white-space: pre;
}
关于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上的所有其他选项:
注入换行符
如果这能帮助到某人…
你可以这样做:
<p>This is an <a class="on-new-line">inline link</a>?</p>
用这个css:
a.on-new-line:before {
content: ' ';
font-size:0;
display:block;
line-height:0;
}