【问题标题】：How to line-break from css, without using ?如何在不使用 的情况下从 css 换行？
【发布时间】：2011-02-11 19:32:53
【问题描述】：

输出：

你好你好吗

代码：

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

如何在没有 的情况下实现相同的输出？

【问题讨论】：

标签： html css

【解决方案1】：

使用 white-space 将不起作用 对于没有空格的长句，如 HiHowAreYouHopeYouAreDoingGood...etc 来解决此问题，请考虑改用 word-wrap: break-word;

它是为了让长词能够中断并换行到下一行。它被 Facebook、Instagram 和 me 使用> ?

示例

#container {
    width: 40%;
    background-color: grey;
    overflow:hidden;
    margin:10px;
}
#container p{
   white-space: pre-line;
    background-color: green;
}
.flex{
    display: flex;
}

#wrap {
    width: 30%;
    background-color: grey;
    overflow:hidden;
    margin:10px;
}
#wrap p{
   word-wrap: break-word;
    background-color: green;
}

<h1> white-space: pre-line;</h1>
<div class='flex'>

<div id="container">
<h5>With spaces </h5>
    <p>Sample Text 1 Sample Text 1 Sample Text 1 Sample Text 1 Sample Text 1 Sample Text 1 Sample Text 1</p>
</div>

<div id="container">
  <h5>No specaes (not working )</h5>  <p>HiHowAreYouHopeYouAreDoingGoodHiHowAreYouHopeYouAreDoingGoodHiHowAreYouHopeYouAreDoingGood</p>
</div>
</div>




<h1>  word-wrap: break-word;</h1>
<div class='flex'>

<div id="wrap">
<h5>With spaces </h5>
    <p>Sample Text 1 Sample Text 1 Sample Text 1 Sample Text 1 Sample Text 1 Sample Text 1 Sample Text 1</p>
</div>

<div id="wrap">
  <h5>No specaes (working )</h5>  <p>HiHowAreYouHopeYouAreDoingGoodHiHowAreYouHopeYouAreDoingGoodHiHowAreYouHopeYouAreDoingGoodHiHowAreYouHopeYouAreDoingGood</p>
</div>
</div>

【讨论】：

【解决方案2】：

代码可以是：

<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;
}

【讨论】：

2021年，这应该是公认的答案。这是最少的代码和最少的hacky。

【解决方案3】：

这适用于 Chrome：

p::after {
  content: "-";
  color: transparent;
  display: block;
}

【讨论】：

【解决方案4】：

例如，您可以添加大量填充并强制将文本拆分为新行

p {
  padding-right: 50%;
}

在响应式设计的情况下对我来说效果很好，只有在一定的宽度范围内才需要拆分文本。

【讨论】：

听起来不错，但增加内边距也会增加对象的整体宽度。这可能会产生负面影响，特别是在响应式页面的情况下。

【解决方案5】：

我喜欢非常简单的解决方案，这里还有一个：

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

和 CSS：

p {
  display: flex;
  flex-direction: column;
}

【讨论】：

【解决方案6】：

使用overflow-wrap: break-word; 喜欢：

.yourelement{
  overflow-wrap: break-word;
}

【讨论】：

【解决方案7】：

在 CSS 中使用代码

p {
  white-space: pre-line;
}

使用此 CSS，P 标记内的每个输入都将成为 HTML 的换行符。

【讨论】：

这正是我想要的！非常适合从 JS 生成的元素内容（例如，来自 AJAX 查询的 JSON 结果、角度模式表单等）通过转义/清理（例如，不使用 ngBindHtml 时的正常 AngularJS 转义行为）

【解决方案8】：

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

在blockquote 中，以下示例同时显示标题和源链接，并用回车符 ("\a") 分隔两者：

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

【讨论】：

花哨，但完全不需要问题是什么。
+1 因为它只是 CSS，不建议使用 pre、br 标签，也不建议将显示模式更改为阻止（这会增加不同的行为，如果父级位于 display:flex 和因此在这种情况下是一个黑客）。它并不花哨，真的，只是一种现代技术。如果您想要完全相同的标记，但实际上反应不同，那就是要走的路。
好主意。注意"——不要使用简单的引号'，因为你想让\a被解析为一个特殊字符。
我想给 +1，但它在 chrome 55 上对我不起作用
如果有一些 HTML 和 Fiddle 来帮助可视化您正在做的事情，我会对此投赞成票。

【解决方案9】：

像往常一样使用` `，但当你不想要它时用`display: none`隐藏它。

我希望大多数发现此问题的人都希望使用 css / 响应式设计来决定是否在特定位置出现换行符。（并且没有针对  的任何个人信息）

虽然不是很明显，但您实际上可以将display:none 应用于  标记以隐藏它，这样就可以将媒体查询与语义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) */
  }
}

这在响应式设计中很有用，在这种设计中，您需要将文本强制分成两行，并在一个确切的中断处。

jsfiddle example

【讨论】：

Simon，你说得对——你举的例子正是我研究这个问题的确切原因，display: none 解决方案是迄今为止最合适和最有用的。
请注意，对于会导致单词一起运行的情况，您可以使用 display: inline-block; width: 1em; 代替 none。
如果您需要更多控制但不要太疯狂，您甚至可以为   应用一个类！
另一个“为什么我没有想到这个？！”回答。   擅长它的工作；无需重新发明轮子。谢谢！
@amh15 他没有说他为什么要这样做。或者说BR有什么问题。它是来自天气预报 Web 服务的预格式化文本，还是响应式设计问题。在回答所有前置/自动换行答案时已经存在。你说得对，细节很重要，但我的回答帮助了很多根据关键词找到这个问题的人，所以我不明白你为什么要如此挑剔。我很想知道他真正想做什么。但我也不在乎。

【解决方案10】：

您可以使用white-space: pre; 使元素的行为类似于<pre>，从而保留换行符。示例：

p {
  white-space: pre;
}

<p>hello 
How are you</p>

请注意，IE 仅适用于 IE8+。

【讨论】：

通常比pre 更好的是pre-line，它允许换行。
更多关于 pre-line 和 pre-wrap 之间的区别developer.mozilla.org/en-US/docs/Web/CSS/white-space
在我的情况下我更喜欢 pre，因为我也可以使用 text-overflow
请注意，这不适用于 react，因为文本最终会被捆绑并放在同一行，这不会触发 white-space CSS 规则。

【解决方案11】：

不可能有相同的HTML结构，你必须有区分Hello和How are you的东西。

我建议使用spans，然后将其显示为块（实际上就像<div>）。

p span {
  display: block;
}

&lt;p&gt;&lt;span&gt;hello&lt;/span&gt;&lt;span&gt;How are you&lt;/span&gt;&lt;/p&gt;

【讨论】：

还要注意有多少额外的标记 -   元素的存在是有充分理由的。如果因为它们是单独的段落而需要换行符，那么只需将它们标记为单独的段落。
您可能需要结构化的线条而不实际使用段落。例如标记一首诗、一首歌或一个地址
@VincentRobert 对，但一首诗是当  是正确标记时的典型示例。一首诗的跨度是“错误的”。
请注意，将 display: block 分配给元素会在前后强制换行，因此与换行完全不同。
绝对使用
元素。元素不应该被制作成 display:block，的全部意义在于它是内联的。我会这样做：

hello

你好吗

。不需要奇怪的 CSS。

【解决方案12】：

您需要在 中声明内容。之后，这条线将被打破。

\A 表示换行符。

.class_name::after {
  content: "\A";
  white-space: pre;
}

【讨论】：

【解决方案13】：

我猜你不想使用断点，因为它总是会断线。那是对的吗？如果是这样，如何在文本中添加断点 ，然后给它一个像  这样的类，然后使用媒体查询在您希望它中断的大小上方隐藏 ，使其以特定宽度中断但保持在该宽度之上。

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/

【讨论】：

我刚刚注意到 Simon_Weaver 发布了一个与我类似的答案。对不起，西蒙，并没有试图抄袭你的回复。在发布我的答案之前，我没有阅读所有答案，因此没有注意到你的答案。我的糟糕......吸取了教训......我会在未来发布我的之前阅读其他答案。
别担心！但是你必须给我写一首诗。来自w3schools.com/tags/tag_br.asp"Tip: The tag is useful for writing addresses or poems."

【解决方案14】：

<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://stackoverflow.com/a/36191199/2377343

【讨论】：

【解决方案15】：

链接列表

其他答案提供了一些添加换行符的好方法，具体取决于具体情况。但应该注意的是，: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>

注意上述方案的优点：

无论 HTML 中的空格如何，输出都是相同的（与 pre 相比）
没有向元素添加额外的填充（参见 NickG 的 display:block cmets）
您可以使用一些共享的 CSS 在水平和垂直链接列表之间轻松切换，而无需进入每个 HTML 文件来更改样式
没有影响周围内容的float 或clear 样式
样式与内容是分开的（相对于  或pre 带有硬编码的中断）
这也适用于使用a.toc:after 和<a class="toc"> 的松散链接
您可以添加多个中断甚至前缀/后缀文本

【讨论】：

【解决方案16】：

使用&nbsp; 代替空格可以防止中断。

<span>I&nbsp;DONT&nbsp;WANT&nbsp;TO&nbsp;BREAK&nbsp;THIS&nbsp;LINE&nbsp;UP, but this text can be on any line.</span>

【讨论】：

【解决方案17】：

将br 标记设置为display: none 很有帮助，但您最终可以使用WordsRunTogether。我发现将其替换为空格字符会更有帮助，如下所示：

HTML：

<h1>
    Breaking<br />News:<br />BR<br />Considered<br />Harmful!
</h1>

CSS：

@media (min-device-width: 1281px){
    h1 br {content: ' ';}
    h1 br:after {content: ' ';}
}

【讨论】：

您还可以考虑将br 设置为display: inline-block; width: 1em;，这样可以防止单词在横向排列时连在一起。
我更喜欢你的建议。下次遇到这个我会试试的。

【解决方案18】：

基于之前所说的，这是一个有效的纯 CSS 解决方案。

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

【讨论】：

我刚刚发现这种方法的一种变体有助于:before 上的多行input type='text', wrapping the input, and then laying the text over it with a wrapper div. That also requires pointer-events:none;` 以便仍然能够点击下面的按钮。

【解决方案19】：

如果这对某人有帮助...

你可以这样做：

<p>This is an <a class="on-new-line">inline link</a>?</p>

有了这个css：

a.on-new-line:before { 
  content: '&nbsp;'; 
  font-size:0; 
  display:block;
  line-height:0;
}

【讨论】：

或.on-new-line:before {content: ""; display: block;}

【解决方案20】：

有几个选项可用于定义空格和换行符的处理。如果可以将内容放入例如 标签很容易得到任何人想要的任何东西。

对于保留换行符但不保留空格，请使用pre-line（不是pre），例如：

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

<p>hello
How are you</p>

如果需要另一种行为，请在以下之一中进行选择（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 */

SOURCE: W3 Schools

【讨论】：

完美。应该是选择的答案。
我相信这就是 OP 正在寻找的。span>

【解决方案21】：

对于一个糟糕的问题，这是一个糟糕的解决方案，但它确实符合简短的要求：

p {
    width : 12ex;
}

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

【讨论】：

错字或ex 应该是什么？ p 和 e 在键盘上不是那么接近，这就是我问的原因
@marczking - the relative unit ex is defined as "Equal to the used x-height of the first available font."
好坏不坏，这其实很聪明。

【解决方案22】：

也许有人会和我有同样的问题：

我在一个带有display: flex 的元素中，所以我不得不使用flex-direction: column。

【讨论】：

【解决方案23】：

在我的例子中，我需要一个输入按钮，在它之前有一个换行符。
我将以下样式应用于按钮并且它起作用了：

clear:both;

【讨论】：

但这不是答案的情况。答案中没有浮点数。

【解决方案24】：

<pre> 标签呢？

来源：http://www.w3schools.com/tags/tag_pre.asp

【讨论】：

哦！我明白你的意思了。然后你在你的<pre> 中使用空格，这样它就会断行。如果你想有常规的空格怎么办？
pre 标签将解释其中的回车。因此，如果您在 pre 标记中打破“你好”和“你好吗”之间的界限，则中断将被渲染

【解决方案25】：

Vincent Robert 和 Joey Adams 的答案都是有效的。但是，如果您不想更改标记，则可以使用 javascript 插入  。

在不更改标记的情况下，无法在 CSS 中做到这一点。

【讨论】：

这不准确。可以使用:after 或:before 来做到这一点。
@ArturBodera 不可能stackoverflow.com/questions/5865937/…

【解决方案26】：

要使元素之后有换行符，请分配它：

display:block;

块级元素之后的非浮动元素将出现在下一行。许多元素，例如

和

已经是块级元素，因此您可以直接使用它们。

虽然很高兴知道这一点，但这实际上更多地取决于您的内容的上下文。在您的示例中，您不希望使用 CSS 强制换行。
是合适的，因为在语义上 p 标记最适合您显示的文本。更多的标记只是为了挂起 CSS 是不必要的。从技术上讲，它不是完全一个段落，但没有标签，所以使用你所拥有的。用 HTMl 很好地描述您的内容更为重要 - 在您完成之后然后弄清楚如何使它看起来更漂亮。

【讨论】：

但这使它成为容器的整个宽度，这可能是一个不需要的副作用（特别是如果项目是锚/链接）。
是的，默认情况下，块级元素占据整个宽度，除非您设置宽度。阅读我关于上下文的段落 - 从语义上下文的角度思考而不是根据您的设计选择您的 html 通常有助于防止您遇到类似的问题。
通常需要避免使用
标签的原因更多是技术而非语义。
标签是独立的，您不一定要使用它们，因为您不知道在呈现页面时前面的元素是否存在，因此您可能不需要空行。考虑一个垂直菜单上的链接列表，您希望它们都在自己的行中，但不能使用
因为您不知道哪些链接会因服务器端规则而被隐藏。如果使用
，隐藏链接会导致空行。
..出于这个原因，人们经常使用
但正如我在第一条评论中所说的那样 - 这具有元素全宽的不良副作用:) 我只需要新行上的项目，而不是全宽。如果该项目是页面最左侧的链接，则意味着即使单击屏幕最右侧的链接也会跟随该链接。

如何在不使用 <br /> 的情况下从 css 换行？

像往常一样使用`<br/>`，但当你不想要它时用`display: none`隐藏它。

链接列表

像往常一样使用&lt;br/&gt;，但当你不想要它时用display: none隐藏它。

链接列表

像往常一样使用`<br/>`，但当你不想要它时用`display: none`隐藏它。