2 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
</head>
<body>
<br /><br /><br />
<div style="line-height:150%">
<span style="display:block;font-size:240%;">test</span>
</div>
</body>
</html>

首先双击文本test，然后突出显示，

然后您可以通过萤火虫看到<span>它所在的内容比文本本身短。

如何使span文本自动增长？

4

2 回答 2

4

尝试更改line-height为1.5

于 2010-01-11T08:48:35.053 回答
1

这是您的原始代码：

<div style="line-height: 150%;">
 <span style="display: block; font-size: 240%;">Test</span>
</div>

这会将 中line-height的所有元素的 设置div为 150%。这个百分比是相对于他们计算的字体大小的。span继承 的，font-size并div以此line-height为基础计算 。您将 的 设置为其继承大小font-size的24 倍，但不受影响。spanline-height

简而言之： line-height: 150%将使用元素计算出的字体大小的 150% 来计算行高，这相当于将其乘以 1.5。

如前所述，使用line-height: 1.5;改为修复该行为：

<div style="line-height: 1.5;">
 <span style="display: block; font-size: 240%;">Test</span>
</div>

这会触发line-height基于新字体大小的重新计算。它将 中line-height的所有元素的 设置div为 1.5 倍。这个百分比是相对于它们的实际字体大小的。span继承font-size的div。_ 您将 的 设置为其继承大小font-size的2.4 倍，并根据该大小计算新的。spanline-height

简而言之：（ line-height: 1.5没有单位）将元素的实际字体大小乘1.5以计算行高。

于 2010-01-11T09:49:52.383 回答