Question

我有一个headLine div容器<h1>和<h2>它是绝对位置并且宽度为100％，我需要100％宽度才能使fittext.js正常工作，不过当我将div放置得这么多em时，它给了我一个水平滚动条。由于我的网站结构，我不能做相对定位，我可以，但这将使事情进一步困难。好吧，为什么我得到这个水平宽度，如果它可以摆脱它。

查看项目http://jsfiddle.net/sLXZs/3/

html / js

        <div id="headLine">
            <h1 class="fitText">Austin Kitson</h1>
            <h2 class="fitText">Marketing & Sales</h2>
        </div>




                <script>
                    jQuery(document).ready(function($) {
  $('.fitText').fitText(2.2, { minFontSize: '10px', maxFontSize: '80px' });

});
                </script>

CSS

#headLine {
  position: absolute;
  top: 50%;
  left: 55%;
  width: 100%;
  background: red; }

Answer 1

似乎只是将div的大小而不是100％固定为45％并将fittext的kompressor参数设置为1使其正常工作。

的CSS

#headLine {
  position: absolute;
  top: 50%;
  left: 55%;
  width: 45%;
  background: red; }

脚本

jQuery(document).ready(function($) {
    $('.fitText').fitText(1, {
        minFontSize: '10px',
        maxFontSize: '80px'
    });
});

http://jsfiddle.net/sLXZs/4/

演示

Answer 2

设置体溢出以避免滚动条：

body,html{overflow-x:hidden}

DEMO：http://jsfiddle.net/sLXZs/5/

某些旧版浏览器不支持

overflow-x。您可以尝试使用overflow:hidden

Answer 3

假设您想要保持100％宽度样式而不使用45％宽度，它仍然可以并且可以动态计算：

$("#headLine").width(function () {
   return $(this).width() - $(this).css('left');
});

行动中：http://jsfiddle.net/sLXZs/6/

左侧位置是一个绝对div，宽度为100％，带有fittext.js

3 个答案: