我有一个Java应用程序,它在WebView中显示单个HTML文件。
以下CSS代码段用于设置该网页中<div>
的样式:
.header {
margin: auto;
background-color: #0479ccff;
font-weight: bold;
color: #FFFFFF;
padding: 5px;
height: 20px;
}
但是,<div>
中文本的字体大小可由应用程序用户调整,因此我需要一种方法来缩放div相对于字体大小的高度。对于较大的字体,<div>
高度保持不变,文本与其底部边框重叠。
有没有办法处理纯CSS?
答案 0 :(得分:1)
以em
指定高度,而不是以像素为单位。然后,随着字体大小的改变,高度将自动改变。
.header {
margin: auto;
background-color: #0479ccff;
font-weight: bold;
color: #FFFFFF;
padding: 5px;
height: 1.8em;
}
答案 1 :(得分:0)
不确定。如果你摆脱了高度,那么div的高度应该随文本而变化。
这样做:
.header {
margin: auto;
background-color: #0479ccff;
font-weight: bold;
color: #FFFFFF;
padding: 5px;
}
答案 2 :(得分:0)
身高:20px 阻止你的div增长。而不是高度,请尝试使用 min-height 。
.header {
margin: auto;
background-color: #0479cc;
font-weight: bold;
color: #FFFFFF;
padding: 5px;
min-height: 20px;
overflow:hidden;
}
这将使高度保持至少20px,同时允许div增长以适应字体大小的增加。
示例演示
添加演示以增加/减少字体大小,使用JavaScript更改.header字体大小。看起来您可以单击Run Snippet来查看演示。
var gFontSize = 16;
$(document).ready(function() {
$('#grow').click(function() {
$(".header").css("font-size", ++gFontSize);
});
$('#shrink').click(function() {
$(".header").css("font-size", --gFontSize);
});
});
.header {
margin: auto;
background-color: #0479cc;
font-weight: bold;
color: #FFFFFF;
padding: 5px;
min-height: 20px;
overflow: hidden;
}
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>test</title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class="header">TEXT</div>
<button id="grow">increase font</button>
<button id="shrink">decrease font</button>
</body>
</html>