如何在CSS中进行换行，而不使用<br/>标签？

Question

如何在不使用<br>标签的情况下获得相同的输出？

<p>hello <br> How are you </p>

输出:

你好
你怎么样

- Jitendra Vyas

Answer 1

你可以使用white-space: pre;让元素像<pre>一样，保留换行符。例如：

p {
  white-space: pre;
}

<p>hello 
How are you</p>

- Joey Adams

---

通常比pre更好的是pre-line，它允许自动换行。 - Alan H.

有关pre-line和pre-wrap之间差异的更多信息，请访问 https://developer.mozilla.org/en-US/docs/Web/CSS/white-space。 - patrick

在我的情况下，我更喜欢使用pre，因为我也可以使用text-overflow。 - Greg

请注意，这种方法在使用React时无法奏效，因为文本最终会被捆绑在一起放在同一行上，这样就不会触发“white-space” CSS规则。 - Vadorequest

如果你想在React中使用它，渲染时将文本包裹在模板字符串中。 - Haneen Mahdin

Answer 2

在相同的HTML结构下，区别Hello和How are you需要一些特殊操作。

我建议使用span标签，然后将其显示为块级元素（就像<div>一样）。

p span {
  display: block;
}

<p><span>hello</span><span>How are you</span></p>

- Vincent Robert

---

请注意，有多少额外的标记要添加——<br />元素是有很好的原因存在的。如果你想要换行是因为它们是分开的段落，那么只需将它们标记为不同的段落即可。 - Rowland Shaw

您可能需要使用结构化的行来标记诗歌、歌曲或演讲等内容，而不实际使用段落。例如，为了标记一首诗、一首歌或一个演讲稿，您可以这样做。 - Vincent Robert

@VincentRobert 对的，但诗歌是<br>正确标记的典型示例。对于诗歌来说，使用Spans会是“错误”的做法。 - Alan H.

请注意，将 display: block 分配给一个元素会在其前后强制换行，因此与单个换行符并不完全相同。 - jerseyboy

一定要使用<p>元素。不能将<span>元素改成display:block，<span>的整个意义在于它是内联的。我会这样做：<div><p>你好</p><p>你怎么样</p></div>。不需要奇怪的CSS。 - user1019517

Answer 3

使用<br/>作为正常的换行符，但使用display: none来隐藏它。

我预计大多数人找到这个问题是想要使用响应式设计来决定特定位置是否出现换行符。

虽然不是立即明显，但你可以将display:none应用于<br/>以隐藏它。

br { display: none; }

这意味着您可以像对待其他CSS一样使用媒体查询。

<div>
  The quick brown fox<br />
  jumps over the lazy dog
</div>

@media screen and (min-width: 20em) {
  br {
    /* hide the BR tag for wider screens (i.e. no line break) */
    display: none; 
  }
}

这在屏幕宽度不同的情况下，如果你需要在不同的位置强制换行时非常有用。当然，如果你想始终防止在特定位置发生换行，你也可以使用 。

jsfiddle example

- Simon_Weaver

---

Simon，你说得对——你提到的例子正是我研究这个问题的原因，display: none解决方案是迄今为止最合适和有用的。 - fullstackplus

请注意，在会导致单词连在一起的情况下，您可以使用类似于display:inline-block; width:1em;而不是none的东西。 - Beejor

如果需要更多控制，甚至可以为<br class='foo'>应用一个类，但不要过于疯狂！ - Simon_Weaver

另一个“为什么我没想到这个？！”的答案。"<br/>" 做得很好，没有必要重新发明轮子。谢谢！ - rinogo

@amh15 他没有说为什么要这样做。或者说BR有什么问题。它是来自天气报告网络服务的预格式化文本，还是一个响应式设计问题。在回答时，所有的预/单词换行答案都已经存在了。你说得对，细节很重要，但我的答案帮助了很多通过关键字找到这个问题的人，所以我不明白为什么你要这么挑剔。我很想知道他真正想做什么。但我也不在乎。 - Simon_Weaver

Answer 4

有几种选项可以定义处理空格和换行的方式。 如果可以将内容放在例如<p>标签中，那么很容易得到想要的任何内容。

要保留换行但不保留空格，请使用pre-line（而不是pre），如下所示：

<style>
 p {
     white-space: pre-line; /* collapse WS, preserve LB */
   }
</style>

<p>hello
How are you</p>

如果需要另一种行为，请从以下选项中选择之一（WS=空格，LB=换行符）:

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 */

来源：W3 Schools

- petermeissner

Answer 5

"\a"在CSS中是一个生成换行符的命令。这是CSS而不是HTML，所以它会更接近你想要的：没有额外的标记。

在blockquote中，下面的示例显示标题和来源链接，并使用换行符（"\a"）将两者分开：

blockquote[title][cite]:after {
  content:attr(title)"\a"attr(cite)
}

- David Latapie

---

华丽，但对于问题来说完全不必要。 - YePhIcK

+1 是因为它只使用 CSS，并且不建议使用 pre、br 标签，也不改变显示模式为块级元素（这会添加不同的行为，在父元素为 display:flex 时可能会导致破坏，因此在这种情况下是一种 hack）。它并不花哨，只是一种现代技术。如果你想要完全相同的标记，但实际上要有不同的反应，那么这是正确的方法。 - renoirb

绝妙的想法。请注意 " - 不要使用单引号 '，因为您希望允许 \a 被解析为特殊字符。 - Hafenkranich

我想要按+1，但在Chrome 55上它不起作用。 - pery mimon

如果有一些HTML代码和一个"Fiddle"能够帮助可视化你所做的事情，我会点赞这个回答。 - John

Answer 6

在CSS中使用以下代码

p {
  white-space: pre-line;
}

使用这个CSS，P标签内的每个Enter键都会变成HTML中的换行符。

- burunoh

---

这正是我一直在寻找的！它完美地适用于由JS生成的元素内容（例如来自AJAX查询的JSON结果，angular-schema-form等），并通过转义/清理传递（例如在不使用ngBindHtml时的普通AngularJS转义行为）。 - Stefan Dragnev

Answer 7

在之前说过的基础上，这是一个纯 CSS 方案，可行。

<style>
  span {
    display: inline;
  }
  span:before {
    content: "\a ";
    white-space: pre;
  }
</style>
<p>
  First line of text. <span>Next line.</span>
</p>

- cruzanmo

---

我刚刚发现这种方法的变化对于多行input type='text'很有帮助，将输入框包裹起来，然后用一个包装器div覆盖在上面。这还需要在:before中使用pointer-events:none;，以便仍然能够点击下面的按钮。 - Eric Lease

Answer 8

为了使一个元素后面有一个换行符，请添加以下样式：

display:block;

非浮动的块级元素会紧随在上一个块级元素下一行显示。许多元素，如<p>和<div>已经是块级元素，因此您可以直接使用它们。 但是，这取决于您内容的上下文。在您的示例中，您不希望使用CSS强制换行。<br/>标签是适当的，因为从语义上讲，<p>标签最适合显示文本。只是为了挂载CSS而添加更多标记是不必要的。技术上它并不完全是一个段落，但没有<greeting>标签，所以请使用现有的标签。使用HTML清晰地描述您的内容比美化页面更重要-在做到这一点之后，再考虑如何让其看起来漂亮。

- Syntax Error

---

但这会使其变成容器的完整宽度，这可能是一个不必要的副作用（特别是如果该项是锚/链接）。 - NickG

通常需要避免使用 <br> 标签的原因更多是技术上的而非语义上的。 <br> 标签是独立的，您不能保证在呈现页面时前面的元素是否存在，因此您可能不希望出现空行。考虑一个垂直菜单上的<a>链接列表，您希望它们都在自己的行上，但不能使用 <br> ，因为您不知道由于服务器端规则哪些链接将被隐藏。如果使用 <br> ，隐藏链接会导致空行。 - NickG

因此，人们经常使用<ul>列表，然后隐藏项目符号，但这相当不专业。最好有一个CSS规则，只需说“始终在自己的行上呈现”。 - NickG

CSS确实有这样的规则。它被称为"display:block"。顺便说一下，<li>是块级元素，这就是为什么它们显示在自己的行上的原因。还有浮动和清除选项，但我个人认为如果过度使用会很混乱。人们使用li并用css隐藏符号的原因实际上是语义化的 - 如果他们正在显示项目列表，则应该使用列表项标记。即使似乎技术上更难，但将语义放在首位时，事情变得不那么“hacky”，您实际上最终得到的代码要容易得多。 - Syntax Error

但正如我在第一条评论中所说的那样 - 这会导致元素变成全宽，这是不可取的 :) 我只需要每个项目在新行上，而不是全宽。如果该项是页面最左侧的链接，则即使在屏幕最右侧点击也会跟随该链接。 - NickG

Answer 9

<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://dev59.com/iVoV5IYBdhLWcg3weux1#36191199

- T.Todua

Answer 10

以下是一个糟糕的答案，用来回答一个糟糕的问题，但是它严格符合要求：

p {
    width : 12ex;
}

p:before {
    content: ".";
    float: right;
    padding-left: 6ex;
    visibility: hidden;
}

- Alohci

---

错别字还是ex应该是什么？键盘上p和e并不接近，所以我才问。 - MMachinegun

相对单位ex的定义是“等于第一个可用字体的x高度”。 - Alohci

好坏不分，这实际上相当聪明。 - Jonathan Dumaine