如何实现相同的输出没有<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
其他回答
<pre>标签呢?
来源:http://www.w3schools.com/tags/tag_pre.asp
有关链接列表
其他答案根据具体情况提供了一些添加换行符的好方法。但是需要注意的是: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>
注意以上解决方案的优点:
No matter the whitespace in the HTML, the output is the same (vs. pre) No extra padding is added to the elements (see NickG's display:block comments) You can easily switch between horizontal and vertical lists of links with some shared CSS without going into every HTML file for a style change No float or clear styles affecting surrounding content The style is separate from the content (vs. <br/>, or pre with hard-coded breaks) This can also work for loose links using a.toc:after and <a class="toc"> You can add multiple breaks and even prefix/suffix text
一个现代而简单的解决方案是这样设置宽度:
宽度:min-content;
这个CSS规则主要适用于文本内容，但不仅限于: https://developer.mozilla.org/en-US/docs/Web/CSS/min-content
p { 保证金:20 px; 颜色:# 222; font-family:'世纪哥特式'，sans-serif; 边框:2px虚线灰色; 填充:3 px; ｝ .max { 宽度:max-content; ｝ .min { 宽度:min-content; ｝ <！DOCTYPE html > < html lang =“en”> <头/ > <身体> <p class="max">最大宽度</p> <p class="min">最小可用宽度</p> < /身体> < / html >
这适用于Chrome浏览器:
p::after {
content: "-";
color: transparent;
display: block;
}
<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
