在 CSS 或 JavaScript 中压缩时，如何让文本在某些点换行？

Question

我在一张带有作者和许可证的照片上有一个标题（三项）。如果可能的话，我希望它能将作者全部放在一行中，将所有许可都放在一行中，否则将文本换行。这在 CSS 中是否可能，或者在 JavaScript 中甚至以一种直接的方式实现？

例如我有一个宽屏幕，这将是我的完整标题：

A photo of an arctic fox by U.S. Fish and Wildlife Service Southeast Region (Public Domain)

但是说图形更小或者屏幕更小，我可以接受任何这些场景：

A photo of an arctic fox
by U.S. Fish and Wildlife Service Southeast Region
(Public Domain)

A photo of an arctic fox
by U.S. Fish and Wildlife Service Southeast Region (Public Domain)

A photo of an arctic fox by U.S. Fish and Wildlife Service Southeast Region
(Public Domain)

我不会同意这个（它在三个中的一个或多个中间分裂）：

A photo of an arctic fox by U.S. Fish and Wildlife
Service Southeast Region (Public Domain)

A photo of an arctic fox by
U.S. Fish and Wildlife
Service Southeast Region (Public
Domain)

我基本上希望它在每个主要元素周围换行，而不是在元素内部。除非该区域太小而无法容纳这些中的任何一个，否则可以在元素中间断开，例如在这个小尺寸中：

A photo of an arctic
fox by U.S. Fish and
Wildlife Service Southeast
Region (Public Domain)

没关系。

我是否需要为此编写某种换行算法，或者有没有办法做

word-break: break-word

，但是

word-break: break-around-custom-spans

之类的事情？如果 CSS 解决方案不可用，如果你能指出正确的方向，如何用算法解决这个问题？

Answer 1

如果您可以编辑字符串，请在所需字符串处添加

\n

。
在父元素上添加

white-space

CSS 属性。

const str = "A photo of an arctic fox \n by U.S. Fish and Wildlife Service Southeast Region \n (Public Domain)";

const p = document.createElement("p");
p.textContent = str
document.body.appendChild(p);

p{
  white-space: pre-line;
}