输出:
你好
,你好吗？
码:
<p>hello <br> How are you </p>
如何实现相同的输出<br>？
Vin*_*ert 355
不可能使用相同的HTML结构,你必须要区分Hello和How are you.
我建议使用spans然后你将显示为块(就像<div>实际上一样).
HTML:
<p><span>hello</span><span>How are you</span></p>
CSS:
p span
{
display: block;
}
Joe*_*ams 320
您可以使用white-space: pre;以使元素行为<pre>,保留换行符.例:
<style>
p {
white-space: pre;
}
</style>
<p>hello
How are you</p>
请注意,这在IE6或IE7中不起作用.我不知道IE8.
Sim*_*ver 113
<br/>正常使用,但display: none在不需要时隐藏它.我希望大多数人发现这个问题想要使用CSS /响应式设计来决定是否在特定的地方出现换行符.(并且没有任何个人反对<br/>)
虽然不是很明显,你可以实际应用display:none的<br/>标签隐藏它,这使得串联使用媒体查询的语义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)
}
}
这在响应式设计中非常有用,您需要在完全中断时将文本强制为两行.
pet*_*ner 94
有几个选项可用于定义空格和换行符的处理.如果可以将内容放在例如<p>标签中,那么很容易得到任何想要的东西.
为了保留换行符而不是空格,请使用pre-line(不pre)像:
<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 */
小智 64
CSS中的"\ a"命令生成回车符.这是CSS,而不是HTML,所以它应该更接近你想要的:没有额外的标记.
在blockquote中,下面的示例显示标题和源链接,并使用回车符("\a")分隔两个:
blockquote[title][cite]:after {
content:attr(title)"\a"attr(cite)
}
bur*_*noh 29
在CSS使用代码
p {
white-space: pre-line;
}
使用此代码css,每个在P标签内输入都将是html的断行.
小智 28
基于之前的说法,这是一个有效的纯CSS解决方案.
<style>
span {
display: inline;
}
span:before {
content: "\a ";
white-space: pre;
}
</style>
<p>
First line of text. <span>Next line.</span>
</p>
要使元素之后有换行符,请指定它:
display:block;
块级元素之后的非浮动元素将出现在下一行.许多元素,例如<p>和<div>已经是块级元素,因此您可以使用它们.
但是,虽然这很有用,但这实际上更多地取决于您的内容的上下文.在您的示例中,您不希望使用CSS强制换行.<br />是合适的,因为在语义上,p标签最适合您正在显示的文本.只需要将CSS挂起来就可以使用更多标记.从技术上讲它不正是一个段落,但没有<问候>标签,所以用你所拥有的.用HTMl很好地描述你的内容更为重要 - 在你拥有它之后再弄清楚如何让它看起来漂亮.
<pre> <---------------------------------------
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
</pre> <--------------------------------------
要么
<div style="white-space:pre"> <-----------------------------------
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
</div> <-----------------------------------
来源:https://stackoverflow.com/a/36191199/2377343
对于一个糟糕的问题,这是一个糟糕的解决方案,但是从字面上看这个简短的问题:
p {
width : 12ex;
}
p:before {
content: ".";
float: right;
padding-left: 6ex;
visibility: hidden;
}
使用overflow-wrap: break-word; 如下：
.yourelement{
overflow-wrap: break-word;
}
其他答案提供了一些添加换行符的好方法,具体取决于具体情况.但应该注意的:after是,由于下面提到的原因,选择器是对链接列表(和类似的东西)进行CSS控制的更好方法之一.
这是一个例子,假设一个目录:
<style type="text/css">
.toc a:after{ content: "\a"; white-space: pre; }
</style>
<span class="toc">
<a href="#a1">Item A1</a> <a href="#a2">Item A2</a>
<a href="#b1">Item B1</a> <a href="#b2">Item B2</a>
</span>
这是Simon_Weaver的技术,它更简单,更兼容.它不会将样式和内容分开,需要更多代码,并且可能存在您希望在事后添加中断的情况.仍然是一个很好的解决方案,特别是对于旧IE.
<style type="text/css">
.toc br{ display: none; } /* comment out for horizontal links */
</style>
<span class="toc">
<a href="#a1">Item A1</a><br/> <a href="#a2">Item A2</a><br/>
<a href="#b1">Item B1</a><br/> <a href="#b2">Item B2</a><br/>
</span>
注意上述解决方案的优点:
pre)display:block评论)float或clear影响周围内容的样式<br/>或pre与硬编码中断)a.toc:after和的松散链接<a class="toc">小智 5
我喜欢非常简单的解决方案，这里还有一个：
<p>hello <span>How are you</span></p>
和CSS：
p {
display: flex;
flex-direction: column;
}