试图设置 texttilate jquery 加载动画的宽度，不起作用

Question

我从这里得到了一个动画：http://codepen.io/jschr/pen/GaJCi

我正在我的项目中使用它。

#content {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    width: 1000px;
    height: 700px;
}

#animation {
 position: absolute;
 z-index: 20;
 width: 1000px;
 height:50px;
 top: 600px;
 left: 350px;
}

#animation2 {
 position: absolute;
 z-index: 20;
 width: 1000px;
 height:50px;
 top: -25px;
 left: 340px;
}

Inside the animation.css:

h1 {
  position: absolute;
  font: 12vmin/12vmin 'Special Elite', cursive;
  left: 0;
  top: 30%;
  margin-top: -4vmin;
  width: 100%;
  text-align: center;
  padding: 2vmin 0;
  text-shadow: 0.15vmin 0.15vmin rgba(0, 0, 0, 0.5);
}

In the main html:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<div id="content">
 <div id="animation"></div>
 <script>
       $("#animation").html('<object data="./animation/animation.htm">');
 </script>
 <div id="animation2"></div>
 <script>
       $("#animation2").html('<object data="./animation/animation2.htm">');
 </script>
</div>
And the animations witch i load into te main html:

<head>
   <link href="https://fonts.googleapis.com/css?family=Special+Elite" rel="stylesheet"> 
   <link rel="stylesheet" href="animate.css" charset="utf-8" />
   <link rel="stylesheet" href="animation.css" charset="utf-8" />
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
   <script src="jquery.lettering.js"></script>
   <script src="jquery.fittext.js"></script>
   <script src="jquery.textillate.js"></script>
   
   
</head>
  
 <body>
 <h1 class="tlt">Hello to my website and welcome</h1>
<script>
$('.tlt').textillate({ 
  in: { effect: 'splat' },
  out: { effect:'hinge', sync: true },
  loop: true
});
</script>
 </body>

The second animation looks almost same.

我想要的是设置宽度的能力，以便能够看到字体几乎为 30px 的整个短语。问题是，第一个动画我能够将字体设置为 8vmin，而第二个动画我来到 12vmin 以将短语作为一个字符串获取。如果我把它变大，它会断成更多的字符串，甚至会切断短语，这取决于我是否尝试设置宽度。我看到动画确实将跨度注入我的 html，它们的宽度为 300，而我几乎需要 700 的宽度。我试图在网上查找，也试图更改我的 css，但没有结果。我还尝试捕获跨度注入并使其变大，但无济于事。还是希望能找到解决办法。如果有人知道怎么做，请告诉我，谢谢。

Answer 1

I found out, i can this:

<script>
       $("#animation").html('<object data="./animation/animation.htm">');
 </script>

simply to this:

<script>
       $("#animation").html('<object width="600px" data="./animation/animation.htm">');
 </script>

And this is how it worked for me, it increased the width inside the loaded object data, thanks anyway.

试图设置 texttilate jquery 加载动画的宽度，不起作用

Tried to set the width of a texttilate jquery loaded animation, doesn't work

html

javascript

css

jquery

width