如何实现相同的输出没有<br>?
<p>hello <br> How are you </p>
输出:
hello How are you
如何实现相同的输出没有<br>?
<p>hello <br> How are you </p>
输出:
hello How are you
当前回答
设置一个br标记来显示:none是有帮助的,但是你可以用WordsRunTogether结束。我发现用空格字符代替它更有帮助,就像这样:
HTML:
<h1>
Breaking<br />News:<br />BR<br />Considered<br />Harmful!
</h1>
CSS:
@media (min-device-width: 1281px){
h1 br {content: ' ';}
h1 br:after {content: ' ';}
}
其他回答
也许有人会有和我一样的问题:
我在一个带有display: flex的元素中,所以我必须使用flex-direction: column。
设置一个br标记来显示:none是有帮助的,但是你可以用WordsRunTogether结束。我发现用空格字符代替它更有帮助,就像这样:
HTML:
<h1>
Breaking<br />News:<br />BR<br />Considered<br />Harmful!
</h1>
CSS:
@media (min-device-width: 1281px){
h1 br {content: ' ';}
h1 br:after {content: ' ';}
}
我喜欢非常简单的解决方案,这里还有一个:
<p>hello <span>How are you</span></p>
和CSS:
p {
display: flex;
flex-direction: column;
}
这适用于Chrome浏览器:
p::after {
content: "-";
color: transparent;
display: block;
}
基于之前所说的,这是一个工作的纯CSS解决方案。
<style>
span {
display: inline;
}
span:before {
content: "\a ";
white-space: pre;
}
</style>
<p>
First line of text. <span>Next line.</span>
</p>