如何实现相同的输出没有<br>?
<p>hello <br> How are you </p>
输出:
hello How are you
当前回答
CSS中的“\a”命令生成一个回车。这是CSS，不是HTML，所以它应该更接近你想要的:没有额外的标记。
在一个blockquote中，下面的例子同时显示标题和源链接，并用回车符("\a")分隔两者:
blockquote[title][cite]:after {
content:attr(title)"\a"attr(cite)
}
其他回答
使用,而不是空格将防止中断。
<span>I DONT WANT TO BREAK THIS LINE UP, but this text can be on any line.</span>
关于css技巧，Chris coyer测试了很多选项，最后一个非常简洁的选项是使用display:table，每个选项都有自己的问题，当你在span上使用background-color时，你会发现!
身体{ 填充:20 px; font-family: 'Open Sans'， Sans -serif; ｝ h1 { 粗细:300; 字体大小:24 px; 行高:1.6; 背景:# eee; 填充:20 px; 边框:5px 0 25px 0; text-align:中心; ｝ H1跨度{ 颜色:白色; 粗细:900; ｝ H1跨度{ 背景:黑色; 填充:1px 8px; 显示:表; 保证金:汽车; ｝ < h1类= " 1 " > 稍后休息 < span > 在此之前 < / span > < / h1 >
在这里你可以看到codeen上的所有其他选项:
注入换行符
CSS中的“\a”命令生成一个回车。这是CSS，不是HTML，所以它应该更接近你想要的:没有额外的标记。
在一个blockquote中，下面的例子同时显示标题和源链接，并用回车符("\a")分隔两者:
blockquote[title][cite]:after {
content:attr(title)"\a"attr(cite)
}
代码可以是:
<div class="text-class"><span>hello</span><span>How are you</span></div>
CSS将是:
.text-class {
display: flex;
justify-content: flex-start;
flex-direction: column;
align-items: center;
}
你可以使用空格:pre;使元素像<pre>一样，保留换行符。例子:
p { 空白:前; ｝ < p >你好 </p>
注意，对于IE，这只适用于IE8+。
