Текст временно падает во время анимации jQuery .toggle ()

Question

У меня есть некоторые HTML, CSS и jQuery, которые сокращают некоторый текст при нажатии кнопки. Он скрывает определенные буквы, чтобы показать сокращение, скрывая все буквы, кроме инициалов каждого слова.

Он скрывает буквы в тегах <span>: S<span>tack</span> E<span>xchange</span>

Проблема заключается в том, что остальные буквы, которые не анимируются в display: none ( S и E ), временно выпадают при перемещении.

$("button").on("click", function() {
  $("span").toggle('slow');
})

p {
  padding: 0;
  margin: 0;
}

body {
  padding: 0;
  margin: 0;
}

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

<button>Click</button>

<p>
  S<span>tack</span> E<span>xchange</span>
</p>

Как предотвратить выпадение инициалов при сокращении слов?

Answer 1

Это проблема CSS line-height. Текст опускается вниз, чтобы заполнить лишние line-height, которые не используются.

Вручную установите line-height на соответствующее меньшее значение и сдвиньте текст вниз с помощью margin, так как * На 1007 * меньше текст перемещается вверх.

Анимация теперь работает плавно.

Fiddle

$("button").on("click", function() {
  $("span").toggle('slow');
})

p {
  padding: 0;
  margin: 0;
  margin-top: 50px;
  line-height: 10px;
}

body {
  padding: 0;
  margin: 0;
}

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

<button>Click</button>

<p>
  S<span>tack</span> E<span>xchange</span>
</p>