:: before :: after替代后显示不同布局的文本/字符

问题描述 投票:0回答:2

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 ...

html css layout pseudo-element
2个回答
0
投票

如果有4种可能的布局,最好的选择是使用Javascript并删除伪元素。


0
投票

有了Will的回答,我找到了一个解决方案,但不需要任何JavaScript。

© www.soinside.com 2019 - 2024. All rights reserved.