1

我有一个 headLine div 容器<h1>，<h2>它是绝对位置并且有 100% 的宽度，我需要 100% 的宽度才能让 fittext.js 正常工作，但是当我将 div 定位到这么多ems 时，它给了我一个水平滚动条。由于我的网站结构，我无法进行相对定位，但我可以，但这会让事情变得更加困难。好的，那么为什么我会得到这个水平宽度，如果它，我该如何摆脱它。

查看项目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; }

​</p>

​</p>

4

3 回答 3

2

似乎只需将 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/

于 2012-12-27T22:42:46.313 回答
1

设置正文溢出以避免滚动条：

body,html{overflow-x:hidden}

演示：http: //jsfiddle.net/sLXZs/5/

overflow-x一些较旧的浏览器不支持。您可以尝试使用overflow:hidden

于 2012-12-27T22:45:54.577 回答
0

假设您想保持 100% 宽度样式而不使用 45% 宽度，它仍然是可能的，并且可以即时计算：

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

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

于 2012-12-27T22:49:25.630 回答