是否可以导入字符串，将其拆分为单词，并仅使用CSS将其显示在3个不同的堆叠行上？

Question

[我正在我的朋友的网站上cargoshipive.com。在管理面板上，有一个地方可以插入项目名称，之后，您可以将其显示为缩略图标题。

这是现在的样子（文字应为：明亮的钻石，3个连字符，品牌，网页设计，美术指导-与2'相同nd照片）。

以及下面，修改后的外观：

我有权修改她的CSS文件并插入HTML内容。 （恕我直言-HTML部分使用起来有些粗略，并且文档缺少用于解释用法的示例。）我做了这个脚本：

Cargo.Event.on("homepage_loaded", function() {
   let titles = document.querySelectorAll("div.title");
   let titleArr;
   titles.forEach(el => {
      titleArr = el.innerText.split("|");
      el.innerHTML = `${titleArr[0]}<br>${titleArr[1]}<br>${titleArr[2]}`;
   });
});

Cargo.Event.trigger("homepage_loaded");

添加时：

titles[0].innerText = "Bright Diamonds|---|Branding, Web Design, Art Direction";

它在我的浏览器中有效，但是当我在系统上尝试运行时，脚本拒绝运行。

我的问题是，是否是根据需要创建标题的另一种方法。

我加了：.thumbnails .title由货物提供：

.thumbnails .title {
    margin-top: 1.2rem;
    margin-bottom: 0.1rem;
    font-size: 2.2rem;
    font-weight: normal;
    color: rgba(0, 0, 0, 0.9);
    font-family: 'Neue Haas Grotesk', Icons /*!Persona*/;
    font-style: normal;
    line-height: 1.3;
}

提前感谢

Answer 1

在我的情况下，解决方案（仅化妆品）在我的CSS文件中：

（自定义宽度不是强制性的，但是如果需要，请使用：display：inline-block，如下所述：

white-space: pre-wrap;
overflow-wrap: break-word;
display: inline-block;
width: 40%;