有几个选项可以定义空格和换行符的处理。 如果你可以把内容放在<p>标签中，你就很容易得到你想要的东西。

要保留换行符而不保留空格，请使用pre-line(而不是pre)，如in:

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

资料来源:W3学校

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

例如，您可以添加大量的填充和强制文本拆分到新行

p {
  padding-right: 50%;
}

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

下面是一个糟糕问题的糟糕解决方案，但它确实符合概要:

p {
    width : 12ex;
}

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

你可以使用空格:pre;使元素像<pre>一样，保留换行符。例子:

p { 空白:前; ｝ < p >你好 </p>

注意，对于IE，这只适用于IE8+。

这适用于Chrome浏览器:

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