Question

我正在Play框架中开发一个网络应用程序，目前我想让整个应用程序能够根据浏览器的大小调整容器和文本的大小。我已经设法调整容器，它工作正常，但我坚持调整字体大小来填充容器的大小。虽然我已经尝试了几种变体，但它似乎根本不起作用：当文本对于容器来说太大时，它只是将它传递到#indexPerson容器中的新行，而不是调整字体。我也尝试设置“white-space：nowrap”，但是这会导致滚动条显示，并且字体仍然不会自行调整。添加“overflow：hidden”只是隐藏了部分文本，没有任何字体大小的调整。有什么我错过了吗？非常感谢提前！我正在使用textFit插件：http://www.jqueryscript.net/text/jQuery-Plugin-For-Fitting-Text-To-Its-Container-textFit.html。我的css文件如下所示：

div#outer {
width:100%;
height:100%;
}

div#indexPerson {
width:100%;
height:6%;
float:left;
border: 2px #385D8A solid;
background-color:#B9CDE5;
border-radius:20px;
-moz-border-radius:20px;
padding-top:2px;
font-size:30px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

索引页面是：

@(people: List[Client])

<!DOCTYPE html>
<html>
    <head>
        <title>My app</title>       
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <link rel="stylesheet" media="screen" href="@routes.Assets.at("stylesheets/index.css")">
        <script src="@routes.Assets.at("javascripts/jquery-1.7.1.min.js")" type="text/javascript"></script>
        <script src="@routes.Assets.at("javascripts/textFit.slow.js")" type="text/javascript"></script>
        <script>
            $(document).ready(function() {
                textFit(document.getElementById('indexPerson'), {maxFontSize: 36}); 
            });
            $(window).resize(function()) {
                textFit(document.getElementById('indexPerson'), {maxFontSize: 36}); 
            });
         </script>
    </head>
    <body>
         <div id="outer">
            @for(person <- people) {
                <a href="@{routes.Application.login_form(person.getId())}">
                <div id="indexPerson">
                    @person.getInfo()
                 </div>
            </a>
            }
        </div>
    </body>
</html>

Answer 1

解决了！自我注意：始终确保div id是唯一的！

在液体容器Play Framework中自动调整字体大小

1 个答案: