将字符串更改为换行符

Question

“我的图书馆的在线目录”将音乐CD的内容显示在每张曲目之间的一行上。我想修改CSS，所以它更漂亮一些。我不知道搜索的合适条件是什么，或者实际上这是否可能。

基本上我想拿这个：

内容:曲目1.萨拉热窝花卉(7:48)“萨拉热窝街道”(4:42)

编辑:生成HTML：

<div class="displayElementText CONTENTS">Track 1. Flowers for Sarajevo (7:48) -- Track 2. Flowers for Sarajevo author's note, historical note, and brief biography of Vedran Smailovic (7:30) -- Track 3. "Streets of Sarajevo" (4:42) -- Track 4. Tomaso Albinoni's Adagio in Gm, arranged by Vedran Smailovic (5:11) -- Track 5. Conversation with John McCutcheon (26:09) -- Track 6. Flowers for Sarajevo : story narrated by John McCutcheon with page-turn prompts (8:27).</div>

并将其替换为：

内容:轨道1.萨拉热窝鲜花(7:48) 轨道2.萨拉热窝作家笔记、历史笔记和韦德兰·斯梅洛维奇简介(7:30) 轨道3。“萨拉热窝街道”(4:42)

由于我们目录的工作方式，我唯一可以访问的工具是CSS.我希望这是可能的，但不要屏住呼吸。

Answer 1

不确定CSS与此有何关系，但假设您有一组歌曲，如：

const songs = ["Flowers for Sarajevo", "Flowers for Sarajevo author's note, historical note, and brief biography of Vedran Smailovic", "Streets of Sarajevo"]

你可以这样做：

html：<ul id="tracklist"></ul>

联署材料：

const tracklist = document.getElementById('tracklist');
const renderSongInPlaylist = (song, i) => {
   const li = document.createElement('li');
   li.textContent = `Track ${i}: ${song}`;
   tracklist.appendChild(li);
}
tracklist.forEach(renderSongInPlaylist)

希望能帮上忙。

Answer 2

仅仅使用CSS是无法实现这一点的。您可以使用一些JavaScript将--替换为<br/>。

var tracks = document.querySelector('.displayElementText.CONTENTS')
tracks.innerHTML = tracks.innerText.replace(/ -- /, '<br/>')

Answer 3

我将从直截了当的答案开始: CSS不允许编辑元素的文本内容。

然而，--如果我们能欺骗--有几件事情可能会奏效：

1. This answer是我发现实际上只使用CSS的最接近的东西。 它使用\A转义序列，但它确实需要手动编辑整个文本(或使用下一种方法)，就我而言，这是绝对的欺骗。 无论如何，这就是如何实现它：

​

div:before {
    content: "Content: Track 1. Flowers for Sarajevo (7:48) \A Track 2. Flowers for Sarajevo author's note, historical note, and brief biography of Vedran Smailovic (7:30) \A Track 3. \"Streets of Sarajevo\" (4:42) \A";
    white-space: pre;
    font-size: 12pt;
    line-height: 1.5;
}

div {
  font-size: 0;
}

<div>
Content: Track 1. Flowers for Sarajevo (7:48) -- Track 2. Flowers for Sarajevo author's note, historical note, and brief biography of Vedran Smailovic (7:30) -- Track 3. "Streets of Sarajevo" (4:42)
</div>

​

1. 处理这一问题的最简单方法是使用正则表达式并替换所有--。如果JavaScript确实不是一个选项，那么您至少可以使用它来操作文本并使用第一个方法。