Question

我的图书馆的在线目录在一行中显示音乐CD的内容＆＃34; - ＆＃34;每条赛道之间。我想修改CSS，所以它更漂亮一点。我不确定要搜索的正确术语是什么，或者事实上，如果这是可能的话。

基本上我想接受这个：

内容：轨道1.鲜花为萨拉热窝（7:48） - 轨道2.鲜花为萨拉热窝作者的笔记，历史记录和Vedran Smailovic的简要传记（7:30） - 第3轨道。＆＃34;街道萨拉热窝＆＃34; （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.＆＃34;萨拉热窝的街道＆＃34; （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无法实现此目的。您可以使用一些JavaScript将--替换为<br/>

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

Answer 3

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

然而 - 如果我们可以作弊 - 有几件事可能有用：

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>

处理此问题的最简单方法是使用正则表达式并替换所有--。如果JavaScript真的不是一个选项，你至少可以用它来操作文本并使用第一种方法。

将字符串更改为换行符

3 个答案: