如何实现相同的输出没有<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 />,然后给它一个类,如<br class="hidebreak"/>,然后使用媒体查询右上方的大小,你想要它打破隐藏<br />,所以它打破在一个特定的宽度,但保持内联以上的宽度。
HTML:
<p>
The below line breaks at 766px.
</p>
<p>
This is the line of text<br class="hidebreak"> I want to break.
</p>
CSS:
@media (min-width: 767px) {
br.hidebreak {display:none;}
}
https://jsfiddle.net/517Design/o71yw5vd/
其他回答
如果这能帮助到某人…
你可以这样做:
<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;
}
设置一个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: ' ';}
}
基于之前所说的,这是一个工作的纯CSS解决方案。
<style>
span {
display: inline;
}
span:before {
content: "\a ";
white-space: pre;
}
</style>
<p>
First line of text. <span>Next line.</span>
</p>
下面是一个糟糕问题的糟糕解决方案,但它确实符合概要:
p {
width : 12ex;
}
p:before {
content: ".";
float: right;
padding-left: 6ex;
visibility: hidden;
}
这适用于Chrome浏览器:
p::after {
content: "-";
color: transparent;
display: block;
}