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

p {
  padding-right: 50%;
}

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

也许有人会有和我一样的问题:

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

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

p {
  padding-right: 50%;
}

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

您需要声明<span class="class_name"></span>内的内容。过了它，线就断了。

\A表示换行字符。

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

设置一个br标记来显示: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: ' ';}
}

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

宽度: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 >