一个现代而简单的解决方案是这样设置宽度:

宽度:min-content;

这个CSS规则主要适用于文本内容，但不仅限于: https://developer.mozilla.org/en-US/docs/Web/CSS/min-content

p { 保证金:20 px; 颜色:# 222; font-family:'世纪哥特式'，sans-serif; 边框:2px虚线灰色; 填充:3 px; ｝ .max { 宽度:max-content; ｝ .min { 宽度:min-content; ｝ <！DOCTYPE html > < html lang =“en”> <头/ > <身体> <p class="max">最大宽度</p> <p class="min">最小可用宽度</p> < /身体> < / html >

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

p {
  padding-right: 50%;
}

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

<pre>标签呢?

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

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

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

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

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

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

代码可以是:

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