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

Vincent Robert和Joey Adams的答案都是正确的。但是，如果您不想更改标记，可以使用javascript插入一个<br />。

在CSS中，不改变标记是无法做到这一点的。

代码可以是:

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

关于css技巧，Chris coyer测试了很多选项，最后一个非常简洁的选项是使用display:table，每个选项都有自己的问题，当你在span上使用background-color时，你会发现!

身体{ 填充:20 px; font-family: 'Open Sans'， Sans -serif; ｝ h1 { 粗细:300; 字体大小:24 px; 行高:1.6; 背景:# eee; 填充:20 px; 边框:5px 0 25px 0; text-align:中心; ｝ H1跨度{ 颜色:白色; 粗细:900; ｝ H1跨度{ 背景:黑色; 填充:1px 8px; 显示:表; 保证金:汽车; ｝ < h1类= " 1 " > 稍后休息 < span > 在此之前 < / span > < / h1 >

在这里你可以看到codeen上的所有其他选项:

注入换行符

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

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

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

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

在一个blockquote中，下面的例子同时显示标题和源链接，并用回车符("\a")分隔两者:

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