如何实现相同的输出没有<br>?
<p>hello <br> How are you </p>
输出:
hello How are you
如何实现相同的输出没有<br>?
<p>hello <br> How are you </p>
输出:
hello How are you
当前回答
<pre> <---------------------------------------
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
</pre> <--------------------------------------
OR
<div style="white-space:pre"> <-----------------------------------
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
</div> <-----------------------------------
来源:https://stackoverflow.com/a/36191199/2377343
其他回答
例如,您可以添加大量的填充和强制文本拆分到新行
p {
padding-right: 50%;
}
对我来说,在响应式设计的情况下工作得很好,只有在一定的宽度范围内,文本才需要被分割。
代码可以是:
<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;
}
我猜您不希望使用断点,因为它总是会断行。对吗?如果是这样,如何在你的文本中添加一个断点<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/
你可以使用空格:pre;使元素像<pre>一样,保留换行符。例子:
p { 空白:前; } < p >你好 </p>
注意,对于IE,这只适用于IE8+。
使用,而不是空格将防止中断。
<span>I DONT WANT TO BREAK THIS LINE UP, but this text can be on any line.</span>