通过Will的回答，我找到了一个不需要JavaScript的解决方案。
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元素(我知道它们不是实际内容(。
那么，有没有一个变通方法来执行呢？
非常感谢！
如果您有4种可能的布局，那么最好的选择可能是使用Javascript并丢弃伪元素。
假设您的用户可以使用类"选择器"中的元素来选择自己选择的布局，并且您的默认样式是"内联"。你的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类：
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);
});
然后，您可以根据所选的类来决定对元素进行样式设置、显示或隐藏。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/
请参见片段。
谢谢Will！
.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>