Html 如何在不使用 <br /> 的情况下从 css 换行？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2703601/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to line-break from css, without using <br />?
提问by Jitendra Vyas
output:
输出：
hello How are you
code:
代码：
<p>hello <br> How are you </p>
How to achieve same output without <br>?
如何在没有的情况下实现相同的输出<br>？
采纳答案by Vincent Robert
Impossible with the same HTML structure, you must have something to distinguish between Helloand How are you.
不可能使用相同的 HTML 结构，您必须有一些东西可以区分Hello和How are you。
I suggest using spans that you will then display as blocks (just like a <div>actually).
我建议使用spans ，然后您将显示为块（就像<div>实际一样）。
p span {
display: block;
}<p><span>hello</span><span>How are you</span></p>回答by Joey Adams
You can use white-space: pre;to make elements act like <pre>, which preserves newlines. Example:
您可以使用white-space: pre;使元素表现得像<pre>，从而保留换行符。例子：
p {
white-space: pre;
}<p>hello
How are you</p>Note for IE that this only works in IE8+.
请注意，对于 IE，这只适用于 IE8+。
回答by Simon_Weaver
Use <br/>as normal, but hide it with display: nonewhen you don't want it.
<br/>正常使用，但display: none在您不想要时隐藏它。
I would expect most people finding this question want to use css / responsive design to decide whether or not a line-break appears in a specific place. (and don't have anything personal against <br/>)
我希望发现这个问题的大多数人都希望使用 css/响应式设计来决定换行符是否出现在特定位置。（并且没有任何个人反对<br/>）
While not immediately obvious, you can actually apply display:noneto a <br/>tag to hide it, which enables the use of media queries in tandem with semantic BR tags.
虽然不是很明显，但您实际上可以应用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)
}
}
This is useful in responsive design where you need to force text into two lines at an exact break.
这在响应式设计中很有用，在这种设计中您需要将文本强制分成两行，并在确切的中断处。
回答by petermeissner
There are several options for defining the handling of white spaces and line breaks.
If one can put the content in e.g. a <p>tag it is pretty easy to get whatever one wants.
有多种选项可用于定义空格和换行符的处理。如果可以将内容放入例如<p>标签中，则很容易获得任何想要的东西。
For preserving line breaks but not white spacesuse pre-line(not pre) like in:
为了保留换行符但不保留空格，请使用pre-line(not pre) 如下所示：
<style>
p {
white-space: pre-line; /* collapse WS, preserve LB */
}
</style>
<p>hello
How are you</p>
If another behavior is wanted choose among one of these (WS=WhiteSpace, LB=LineBreak):
如果需要另一种行为，请选择其中一个（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 */
回答by David Latapie
The "\a"command in CSS generates a carriage return. This is CSS, not HTML, so it shall be closer to what you want: no extra markup.
CSS 中的“\a”命令生成一个回车。这是 CSS，而不是 HTML，所以它应该更接近你想要的：没有额外的标记。
In a blockquote, the example below displays both the title and the source link and separate the two with a carriage return ("\a"):
在块引用中，下面的示例同时显示标题和源链接，并用回车符 ( "\a")将两者分开：
blockquote[title][cite]:after {
content:attr(title)"\a"attr(cite)
}
回答by burunoh
At the CSS use the code
在 CSS 中使用代码
p {
white-space: pre-line;
}
With this code css every enter inside the P tag will be a break-line at the html.
使用此代码 css，P 标签内的每个输入都将是 html 处的断行。
回答by cruzanmo
Building on what has been said before, this is a pure CSS solution that works.
建立在之前所说的基础上，这是一个有效的纯 CSS 解决方案。
<style>
span {
display: inline;
}
span:before {
content: "\a ";
white-space: pre;
}
</style>
<p>
First line of text. <span>Next line.</span>
</p>
回答by T.Todua
<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> <-----------------------------------
回答by Syntax Error
To make an element have a line break afterwards, assign it:
要使元素之后有一个换行符，请分配它：
display:block;
display:block;
Non-floated elements after a block level element will appear on the next line. Many elements, such as <p> and <div> are already block level elements so you can just use those.
块级元素之后的非浮动元素将出现在下一行。许多元素，例如 <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 exactlya 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 thenfigure out how to make it look pretty.
但是，尽管知道这一点很好，但这实际上更多地取决于您的内容的上下文。在您的示例中，您不希望使用 CSS 强制换行。<br /> 是合适的，因为在语义上 p 标签最适合您显示的文本。更多的标记只是为了挂起 CSS 是不必要的。从技术上讲，它不完全是一个段落，但没有 <greeting> 标签，因此请使用您拥有的标签。用 HTMl 很好地描述你的内容是更重要的 - 在你有了它之后，然后弄清楚如何让它看起来很漂亮。
回答by Alohci
Here's a bad solution to a bad question, but one that literally meets the brief:
这是一个糟糕问题的糟糕解决方案，但确实符合简要说明：
p {
width : 12ex;
}
p:before {
content: ".";
float: right;
padding-left: 6ex;
visibility: hidden;
}
