如何实现相同的输出没有<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>和<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.
其他回答
有几个选项可以定义空格和换行符的处理。 如果你可以把内容放在<p>标签中,你就很容易得到你想要的东西。
要保留换行符而不保留空格,请使用pre-line(而不是pre),如in:
<style>
p {
white-space: pre-line; /* collapse WS, preserve LB */
}
</style>
<p>hello
How are you</p>
如果需要另一种行为,请选择其中之一(WS=WhiteSpace, LB=LineBreak):
white-space: normal; /* collapse WS, wrap as necessary, collapse LB */
white-space: nowrap; /* collapse WS, no wrapping, collapse LB */
white-space: pre; /* preserve WS, no wrapping, preserve LB */
white-space: pre-wrap; /* preserve WS, wrap as necessary, preserve LB */
white-space: inherit; /* all as parent element */
资料来源:W3学校
你可以使用空格:pre;使元素像<pre>一样,保留换行符。例子:
p { 空白:前; } < p >你好 </p>
注意,对于IE,这只适用于IE8+。
正常使用<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例子
在我的例子中,我需要一个输入按钮前面有一个换行符。 我应用如下样式的按钮,它工作:
clear:both;
我喜欢非常简单的解决方案,这里还有一个:
<p>hello <span>How are you</span></p>
和CSS:
p {
display: flex;
flex-direction: column;
}