<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

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

p {
    width : 12ex;
}

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

像这样使用 overflow-wrap: break-word;：

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

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

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

对于链接列表

根据情况，其他答案提供了一些添加换行符的好方法。但应该注意的是，对于 CSS 控制链接列表（以及类似的东西），:after 选择器是更好的方法之一，原因如下所述。

这是一个示例，假设有一个目录：

<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 注释）

您可以使用一些共享的 CSS 在水平和垂直链接列表之间轻松切换，而无需进入每个 HTML 文件进行样式更改

没有影响周围内容的浮动或清晰样式

样式与内容是分开的（相对于
，或带有硬编码中断的 pre）

这也适用于使用 a.toc:after 和 的松散链接

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

您需要在 <span class="class_name"></span> 中声明内容。之后，这条线将被打破。

\A 表示换行符。

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

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

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

和 CSS：

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

代码可以是：

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

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

p {
  padding-right: 50%;
}

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

文森特罗伯特和乔伊亚当斯的答案都是有效的。但是，如果您不想更改标记，您可以使用 javascript 插入 <br />。

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

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

clear:both;

万一这对某人有帮助...

你可以这样做：

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

有了这个CSS：

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

使用   而不是空格将防止中断。

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

我猜你不想使用断点，因为它总是会断线。那是对的吗？如果是这样，如何在您的文本中添加断点 <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/

这适用于 Chrome：

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

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

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

例子

#container { 宽度：40%;背景颜色：灰色；溢出：隐藏；边距：10px； } #container p{ white-space: pre-line;背景颜色：绿色； } .flex{ 显示：弹性； } #wrap { 宽度：30%;背景颜色：灰色；溢出：隐藏；边距：10px； } #wrap p{ word-wrap: break-word;背景颜色：绿色； }

white-space: pre-line;

word-wrap: break-word;

在 CSS-tricks，Chris Coyier 测试了很多选项，最后一个非常简洁的选项是使用 display:table，每个选项都有自己的问题，当您在 span 上使用 background-color 时您会发现！

身体{填充：20px； font-family: 'Open Sans', sans-serif; } h1 { 字体粗细：300；字体大小：24px；行高：1.6；背景：#eee；填充：20px；边距：5px 0 25px 0；文本对齐：居中； } h1 跨度 { 颜色：白色；字体粗细：900； } h1 span { 背景：黑色；填充：1px 8px；显示：表格；边距：自动； }

在这个 之后和之前

您可以在此处查看 codepen 上的所有其他选项：

Injecting a Line Break