jquery - 如何为未渲染元素分配空间(使用伪元素)

Question

我有这段代码，它使用数据属性来显示 ruby​​ 文本，但我希望主要文本在切换时不要改变位置。通常人们会使用 visibility:hidden 但这似乎并不适用于这种情况。还有哪些其他选择？

$(function() {
  $("#furigana").click(function() {
    $(".jp").toggleClass("furigana_enabled", this.checked);
  });
});

.jp {
  font-size: 20pt;
}

.furigana_enabled {
  line-height: 2.1em;
}

.furigana_enabled .word {
  margin-right: 0.5em;
  position: relative;
  top: 0.6em;
  display: inline-block;
  white-space: nowrap;
}

.furigana_enabled .kanji::before {
  content: attr(data-reading);
  color: gray;
  font-size: 50%;
  line-height: 1;
  position: absolute;
  top: -0.5em;
  white-space: nowrap;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div>
  <input type="checkbox" id="furigana" checked /><label for="furigana">
    Furigana</label
  >
</div>
<hr />
<div class="jp japanese_gothic furigana_enabled">
  <span class="word"><span class="kanji" data-reading="きのう">昨日</span></span>

  <span class="word" title="noun"
    >すき<span class="kanji" data-reading="や">焼</span>き</span>

  <span class="word" title="particle">を</span>

  <span class="word" title="verb"><span class="kanji" data-reading="た">食</span>べました</span>

  <span class="word" title="punctuation">。</span>
</div>

这是一个link to the code

Answer 1

By using visibility you can achieve this

我在添加类之前设置文本并将其设置为隐藏，然后单击显示其可见性。

$(function() {
  $("#furigana").click(function() {
    $(".jp").toggleClass("furigana_enabled", this.checked);
  });
});

.jp {
  font-size: 20pt;
  line-height: 2.1em;
}
.word {
  margin-right: 0.5em;
  position: relative;
  top: 0.6em;
  display: inline-block;
  white-space: nowrap;
}
.kanji::before {
  content: attr(data-reading);
  color: gray;
  font-size: 50%;
  line-height: 1;
  position: absolute;
  top: -0.5em;
  white-space: nowrap;
  visibility: hidden;
}
.furigana_enabled .kanji::before {
  content: attr(data-reading);
  color: gray;
  font-size: 50%;
  line-height: 1;
  position: absolute;
  top: -0.5em;
  white-space: nowrap;
  visibility: visible;
}
.japanese_gothic {
  font-family: "HiraKakuPro-W3", "Hiragino Kaku Gothic Pro W3", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", Meiryo, "游ゴシック", YuGothic, "ＭＳ Ｐゴシック", "MS PGothic", "ＭＳ ゴシック", "MS Gothic", sans-serif;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div><input type="checkbox" id="furigana" checked><label for="furigana"> Furigana</label></div>
<hr>
<div class="jp japanese_gothic furigana_enabled">
  
<span class="word"><span class="kanji" data-reading="きのう">昨日</span></span>
  
 <span class="word" title="noun">すき<span class="kanji" data-reading="や">焼</span>き</span>
  
<span class="word" title="particle">を</span>
  
<span class="word" title="verb"><span class="kanji" data-reading="た">食</span>べました</span>
 
<span class="word" title="punctuation">。</span>
  
</div>