将字符字符串更改为newline

Question

我的库的在线目录在单行上显示音乐CD的内容， - ＆quot＆quot在每个轨道之间。我想修改CSS，所以它有点漂亮。我不确定正确搜索的条款是什么，或者实际上是否可能。

基本上我想接受：

内容：曲目1.萨拉热窝的鲜花(7:48( - 曲目2.萨拉热窝作者的笔记，历史记录和Vedran Smailovic的简短传记(7:30( - 轨道3。(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.萨拉热窝作者的鲜花，历史笔记和Vedran Smailovic的简短传记(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>

JS：

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不允许编辑元素的文本内容。

但是 - 如果我们可以作弊 - 有几件事可能有效：

1. 这个答案是我实际上只使用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>

2. 最简单的处理方法是使用正则表达式并替换所有--。如果JavaScript实际上不是一个选项，则至少可以用它来操纵文本并使用第一个方法。

Answer 3

您只能使用CSS实现此目标。您可以使用一些JavaScript用<br/>

替换--

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