gpt4 book ai didi

javascript - 液体容器 Play Framework 中自动调整的字体大小

转载 作者:行者123 更新时间:2023-11-28 11:14:45 24 4
gpt4 key购买 nike

我正在 Play Framework 中开发一个网络应用程序,目前我想让整个应用程序能够根据浏览器的大小调整容器和文本的大小。我已经设法使容器调整并且工作正常,但我坚持调整字体大小以填充容器的大小。尽管我已经尝试了几种变体,但它似乎根本不起作用:当文本对于容器来说太大时,它只是将它传递到 #indexPerson 容器中的新行,而不是调整字体。我还尝试设置“white-space: nowrap”,但这会导致出现滚动条,而且字体仍然无法自行调整。添加“溢出:隐藏”只是隐藏了部分文本,没有任何字体大小调整。有什么我想念的吗?非常感谢!我正在使用 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>

最佳答案

解决了! self 注意:始终确保 div id 是唯一的!

关于javascript - 液体容器 Play Framework 中自动调整的字体大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21811575/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com