::before::after 替代項以顯示不同布局的文本/字符

Question

 p { font-weight:bold; }.line.inline_layout.character { font-variant-caps: small-caps }.line.inline_layout.stage_direction { font-style: italic; color: #333; }.line.inline_layout.stage_direction::before { content:", " }.line.inline_layout.stage_direction::after { content:" – " }.line.screenplay_layout { text-align: center; font-family: Courier; }.line.screenplay_layout.character { text-transform: uppercase; display:block; }.line.screenplay_layout.stage_direction { text-transform: uppercase; display:block; }.line.screenplay_layout.stage_direction::before { content:"(" }.line.screenplay_layout.stage_direction::after { content:")" }

 <p>Inline layout:</p> <div class="line inline_layout"> <span class="character">Mike</span><:-- --><span class="stage_direction">whispering</span> <span class="sentence">Watch out ! He's sleeping !</span> </div> <p>Screenplay layout :</p> <div class="line screenplay_layout"> <span class="character">Mike</span> <span class="stage_direction">whispering</span> <span class="sentence">Watch out ! He's sleeping !</span> </div>

這是我的 HTML：

<div class="line">
  <span class="character">Mike</span>
  <span class="stage_direction">whispering</span>
  <span class="sentence">Watch out ! He's sleeping !</span>
</div>

我有兩種顯示方式，取決於用戶的選擇（見代碼片段），有 4 種布局，用戶應該可以隨時切換。

在我不得不允許用戶復制/粘貼和打印文本之前，它工作得很好。

因為我還需要復制::before 和::after 元素（我知道它們不是實際內容）。

那么是否有解決方法來執行此操作？

非常感謝 ！

Answer 1

如果您有 4 種可能的布局，您最好的選擇可能是使用 Javascript 並刪除偽元素。

假設您的用戶可以使用 class “選擇器”中的元素選擇他選擇的布局，並且您的默認樣式是“內聯”。 您的 HTML 將如下所示：

<div class="selector">
  <a id="inline">inline</a>
  <a id="screenplay">screenplay</a>
</div>
<br>
<div class="script inline">
  <p class="character">Mike</p>
  <p class="stage_direction"><span>(</span>whispering<span>)</span></p>
  <p class="sentence">Watch out ! He's sleeping !</p>
</div>

通過單擊選擇器，您可以使用以下代碼更改腳本 div class：

document.querySelector(".selector").addEventListener("click", function(e){
  var itemClicked = e.target;
  // Get the new class stored in ID of element (you may use data attribute instead)
  var scriptClass = itemClicked.id;
  var script = document.querySelector(".script");
  // Reset your class to script alone
  script.className = "script";
  // Add the new class
  script.classList.add(scriptClass);
});

然后，您可以決定設置樣式、顯示或隱藏元素，具體取決於所選的 class。 您的 CSS 的示例如下：

.selector a {
  display: inline-block;
  margin-right: 20px;
  color: blue;
  cursor: pointer;
  text-decoration: underline;
}
.script.inline {
  font-family:arial, verdana, sans-serif;
}
.script.inline p {
  display: inline;
}
.script.inline .stage_direction span {
  display: none;
}
.script.screenplay {
  font-family:courier, courier new, serif;
}
.script.screenplay .stage_direction {
  text-transform: uppercase;
}

請參閱此處的工作示例： https://jsfiddle.net/5c4udr8j/1/

Answer 2

有了威爾的回答，我找到了一個解決方案，但不需要 JavaScript。

見片段。

謝謝威爾！

 .sentence span, .stage_direction span { display: none } p { font-weight:bold; color: #0a0 }.line.inline_layout.character { font-variant-caps: small-caps }.line.inline_layout:first-letter, .line.classic_layout.character, .line.screenplay_layout.character, .line.screenplay_layout.stage_direction { text-transform: uppercase; }.line.inline_layout.stage_direction, .line.classic_layout.stage_direction { font-style: italic; color: #333; }.line.inline_layout.stage_direction span:first-child, .line.inline_layout.character +.sentence span, .line.inline_layout.stage_direction +.sentence span:nth-child(2), .line.classic_layout.stage_direction span:first-child, .line.screenplay_layout.stage_direction span:nth-last-child(-n+2) { display: inline; }.line.classic_layout, .line.screenplay_layout.character, .line.screenplay_layout.stage_direction { text-align: center; }.line.classic_layout.sentence { text-align: left }.line.screenplay_layout { font-family: Courier; }.line.classic_layout.sentence, .line.screenplay_layout.stage_direction, .line.screenplay_layout.sentence, .line.screenplay_layout.character { display:block }

 <p>INLINE PLAY with stage direction</p> <div class="line inline_layout"> <span class="character">mike</span><,-- --><span class="stage_direction"><span>. </span><span>(</span>whispering<span>)</span></span><.-- --><span class="sentence"><span>,</span><span> – </span>Watch out. He's sleeping.</span> </div> <p>INLINE PLAY without stage direction</p> <div class="line inline_layout"> <span class="character">mike</span><,-- --><span class="sentence"><span>.</span><span> – </span>Watch out. He's sleeping !</span> </div> <hr/> <p>CLASSIC PLAY with stage direction</p> <div class="line classic_layout"> <span class="character">mike</span><!-- --><span class="stage_direction"><span>, </span><span>(</span>whispering<span>)</span></span><!-- --><span class="sentence"><span>.</span><span> – </span>Watch out ! He's sleeping !</span> </div> <p>CLASSIC PLAY without stage direction</p> <div class="line classic_layout"> <span class="character">mike</span><!-- --><span class="sentence"><span>.</span><span> – </span>Watch out ! He's sleeping !</span> </div> <hr/> <p>SCREENPLAY with stage direction</p> <div class="line screenplay_layout"> <span class="character">mike</span><!-- --><span class="stage_direction"><span>, </span><span>(</span>whispering<span>)</span></span><!-- --><span class="sentence"><span>.</span><span> – </span>Watch out ! He's sleeping !</span> </div> <p>SCREENPLAY without stage direction</p> <div class="line screenplay_layout"> <span class="character">mike</span><!-- --><span class="sentence"><span>.</span><span> – </span>Watch out ! He's sleeping !</span> </div>