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元素(我知道它们不是实际内容)。>>
那么是否有解决方法?
非常感谢!
p {font-weight:bold; } .line.inline_layout .character {font-variant-caps:small-caps} .line.inline_layout .stage_direction {font-style:斜体;颜色:#333; } .line.inline_layout ...
如果有4种可能的布局,最好的选择是使用Javascript并删除伪元素。
有了Will的回答,我找到了一个解决方案,但不需要任何JavaScript。