如何阻止内容跳跃？ （键入js）

Question

I've written the following code for a static homepage. In this I want to use the library typed, which is include by the partial "head.html". But because of typed my content keeps jumping. This because at a certain point the subtitle container is empty. I've tried adding a default placeholder but this doesn't seem to fix the problem.

 particlesJS.load('particles-js', '/json/particlesjs-config.json', function() { console.log('callback - particles.js config loaded'); }); var typed = new Typed('#typed', { strings: ['First, solve the problem', 'Some <strong>HTML</strong>', 'Chars &times; &copy;'], typeSpeed: 0, backSpeed: 0, loop: true }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/particlesjs/2.2.2/particles.js"></script> {{ partial "head.html" . }} <section class="hero is-info is-medium"> <div class="hero-head"> {{ partial "navbar.html" .}} </div> <div id="particles-js"></div> <div class="hero-body"> <div class="container has-text-centered"> <p class="title"> </p> <p class="subtitle inline-block" id="typed"> </p> </div> </div> <div class="hero-foot"> <nav class="tabs is-boxed is-fullwidth"> <div class="container"> <ul> <li class="is-active"> <a>Overview</a> </li> <li> <a>Work</a> </li> <li> <a>Grid</a> </li> </ul> </div> </nav> </div> </section> {{ partial "footer.html" .}} 

Could anyone help me out?

Answer 1

I ran into a similar problem while trying to use Typed js. After doing some research, I fixed it by adding some css in my code. This might fix your problem.

In the code you provided, there are two errors. Firstly, you need to add a div tag around the p tag with id="typed" and as per the docs , the tag with id="typed" needs to be a span tag. Secondly, you need to add CSS to increase the height and padding.

Finally, it should Typed js parts should look like this:

<style>
  .text-body {
  height: 100px;
  padding: 10px;
}
</style>

<div class="text-body">
    <span id="typed"></span>
</div>

Answer 2

I recommend to do following trick: to add invisible "cursor char", like this

  <div class="container"> <div id="typed-strings" style="display:none;">Text here</div> <span id="typed"></span> <span style="visibility:hidden;">|</span> </div>