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

Question

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

现在是这样
（文字应该是：
Bright Diamonds, 3 个连字符、品牌、网页设计、艺术指导 - 与第二张照片相同）。

及以下，修改后的样子：

我有权修改她的 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%;

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

Is it possible to import string, split it to words, and display it on 3 different stacked rows using CSS only?

html

javascript

css

dom

handlebars.js