如何实现相同的输出没有<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>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;
}
其他回答
如果这能帮助到某人…
你可以这样做:
<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/>,但是当你不需要它时用display: none隐藏它。
我希望大多数发现这个问题的人都想使用css /响应式设计来决定是否在特定的位置出现换行符。(不要对<br/>有任何个人不满)
虽然不是很明显,但实际上可以对<br/>标记应用display:none来隐藏它,这样就可以与语义br标记一起使用媒体查询。
<div>
The quick brown fox<br />
jumps over the lazy dog
</div>
@media screen and (min-width: 20em) {
br {
display: none; /* hide the BR tag for wider screens (i.e. disable the line break) */
}
}
这在响应式设计中非常有用,在这种设计中,您需要在精确的换行处强制将文本分成两行。
jsfiddle例子
设置一个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: ' ';}
}
使用,而不是空格将防止中断。
<span>I DONT WANT TO BREAK THIS LINE UP, but this text can be on any line.</span>
你可以使用空格:pre;使元素像<pre>一样,保留换行符。例子:
p { 空白:前; } < p >你好 </p>
注意,对于IE,这只适用于IE8+。