Question

使用FitText.js遇到一些问题 - 我使用以下代码触发了<head>中的脚本（我已将所有内容都包含在内供参考，计划是当我完成设计和代码布局时，将其最小化）

<script type="text/javascript">
            $(document).ready(function() {

            var $container = $('#thumbnail-array');

                $container.imagesLoaded(function() {
                    $container.masonry({
                        itemSelector: '.video-thumbnail',
                        columnWidth: '.grid-sizer',
                        gutter: '.gutter-sizer',
                        percentPosition: true
                    });
                });
            });

            jQuery(document).ready(function() {
                jQuery('.mobile-close').click(function(e) {
                    jQuery(this).toggleClass('active');
                    jQuery('.mobile-nav').toggleClass('active');

                    e.preventDefault();
                });
                jQuery('.dropdown').click(function(e) {
                    jQuery(this).toggleClass('active');
                    jQuery('.mobile-nav').toggleClass('active');

                    e.preventDefault();
                });
                $(".fittext1").fitText(1.1);
                $(".fittext2").fitText(0.75);
            });

            $(document).ready(function() {
                $('.overlay').hover(function(){
                    $(this).parent().find('video').get(0).play();
                }, function() {
                    var video = $(this).parent().find('video').get(0);
                    video.pause();
                    video.currentTime = 0;
                });
            });

        </script>

主要关注点可能如下：

$(".fittext1").fitText(1.1);
$(".fittext2").fitText(0.75);

从这里开始，我将它应用于两个元素，并在我的CSS中定义如下：

h5 {
    display:inline;
    font-size: 2em;
    margin-bottom: 0px;
    padding-bottom: 0px;
}

h6 {
    display:inline;
    font-size: 0.75em;
    letter-spacing: 0.3em;
    padding-top: 0px;
    margin-top: 0px;
    font-weight: 100;
}

然后在我的HTML中引用，如下所示：

<h5 class="fittext1">Title</h5>
<hr>
<h6 class="fittext2">Subtitle</h6>

现在，我的理解是他们应该与他们的父元素一起扩展 - 但是有些东西已经出现了，我无法解决它的问题！你可以看看这里发生了什么（最重要的是调整大小） - http://jameshenry.info/test/test.php

我尝试了几种不同的东西，但似乎无法使翻转的所有文本保持一致，更不用说按比例放大或缩小了！

我最初使用#ID定位.fittext1和.fittext2元素，但由于多个实例而切换到了类，但是在两者之间切换并不能解决问题。

有没有人知道造成这种行为的原因是什么？

Answer 1

...原因是FtText.js（正如项目的GitHub所指出的）不适用于内联或span元素 - FitText.js应用于的元素（不是包装器或容器）！）需要是absolute，block或inline-block

我通过更改<h5>和<h6＆gt;来解决了这个问题要显示的标签：inline-block;

使用FitText.js时出现奇怪的结果

1 个答案: