减少跨度中的行距

Question

请看下面的跨度：

<div style=" position:absolute; top:37.6pt; left:0.8pt; background-color:; border:0pt solid black; width:234pt;">
<div  align="left" ><span style=" white-space:pre-wrap;  font:normal 8pt Arial; color:rgb(0,0,0);">Your statement shows claims for medical care only after we've received and processed the claim. The claim in question may not have been received yet or it may not be finalized. There may be instances where your claims are not showing up because Health Statements have recently been added to your plan.</span></div> 
</div> 

Span 默认显示行距过大，我想像下面的文字一样带上行距：

<div style=" position:absolute; top:37.6pt; left:0.8pt; background-color:; border:0pt solid black; width:234pt;">
<div  align="left" ><div style=" white-space:pre-wrap;  font:normal 8pt Arial; color:rgb(0,0,0);">Your statement shows claims for medical care only after we've received and processed the claim. The claim in question may not have been received yet or it may not be finalized. There may be instances where your claims are not showing up because Health Statements have recently been added to your plan.</div></div> 
</div> 

我面临的限制是我不能使用“div”而不是 span，我也不能使用“display”属性，所以有没有办法在没有 display 属性的情况下减少 span 中的行间距.. 理想的是“line -height" 属性，但这似乎不起作用..

Answer 1

理想的“行高”属性，但这似乎不起作用..

如果您不在跨度上而是在父容器上设置 line-height，我会工作：

<div style="width: 400px;">
    <div align="left" style="line-height: .4em;">
        <span style="white-space: pre-wrap; font: normal 8pt Arial;">Your statement shows claims for medical care only after we've received and processed the claim. The claim in question may not have been received yet or it may not be finalized. There may be instances where your claims are not showing up because Health Statements have recently been added to your plan.</span>
    </div>
</div>

UPD。 @sai kumar 发现了有关 CSS 规则顺序重要性的有趣细节。为了使line-height 在跨度上工作，它应该放在font 属性之后。顺序在这里很重要，因为font 是一个组合属性，其中还包含line-height。所以在这种情况下，line-height 之后定义的font 将用默认值line-height: normal 覆盖它。

Answer 2

line-height : Xpx; 为span，就可以了。 X 是一个整数值。 FYI

更新

确实有效，给予风格的顺序很重要。

 font:normal 8pt Arial; 
 color:rgb(0,0,0);
 line-height: 9pt;

根据需要指定line -height

我不知道为什么顺序很重要，但工作已经完成。可能是字体覆盖了某些属性

Answer 3

您必须为父 div 提供行高，我已经更新了您可以检查的代码

<div style=" position:absolute; top:37.6pt;line-height:14px; left:0.8pt; background-color:; border:0pt solid black; width:234pt;">
<div  align="left" ><span style=" white-space:pre-wrap;  font:normal 8pt Arial; color:rgb(0,0,0);">Your statement shows claims for medical care only after we've received and processed the claim. The claim in question may not have been received yet or it may not be finalized. There may be instances where your claims are not showing up because Health Statements have recently been added to your plan.</span></div> 
</div> 

Answer 4

将位置属性及其值添加为绝对值：

<div style=" position:absolute; top:37.6pt; left:0.8pt; background-color:; border:0pt solid black; width:234pt;">
<div  align="left" ><span style=" white-space:pre-wrap;  font:normal 8pt Arial; color:rgb(0,0,0);position:absolute;">Your statement shows claims for medical care only after we've received and processed the claim. The claim in question may not have been received yet or it may not be finalized. There may be instances where your claims are not showing up because Health Statements have recently been added to your plan.</span></div> 

Answer 5

这是一个由内嵌字体设置引起的奇怪问题。要绕过它，请在 style 元素或外部样式表中设置字体属性，而不是在 style 属性中设置它们。

问题与包装元素的定位和white-space 设置无关。但这取决于字体属性的设置方式。因此可以通过简化的设置进行演示：

<style>
.foo { font: 8pt Arial }
h2 { font-size: 100%; margin: 1em 0 0 0 }
</style>
<h2>span</h2>
<span style="font:normal 8pt Arial;">Your statement shows claims for medical care only after we've received and processed the claim. The claim in question may not have been received yet or it may not be finalized. There may be instances where your claims are not showing up because Health Statements have recently been added to your plan.</span>
<h2>div</h2>
<div style="font:normal 8pt Arial;">Your statement shows claims for medical care only after we've received and processed the claim. The claim in question may not have been received yet or it may not be finalized. There may be instances where your claims are not showing up because Health Statements have recently been added to your plan.</div>
<h2>span, but font not set inline</h2>
<span class="foo">Your statement shows claims for medical care only after we've received and processed the claim. The claim in question may not have been received yet or it may not be finalized. There may be instances where your claims are not showing up because Health Statements have recently been added to your plan.</span>