Question

请参阅下面的范围：

＆＃13;

<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>

＆＃13;

默认情况下，跨度显示的行间距太大，我希望像下面的文字一样显示行间距：

＆＃13;

<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>

＆＃13;

我面临的限制是我无法使用＆＃34; div＆＃34;而不是跨度，我也不能玩＆＃34;显示＆＃34;属性，所以有没有任何方法可以减少跨度中的行间距而没有display属性..理想情况下＆＃34; line-height＆＃34;财产，但似乎不起作用..

Answer 1

理想情况下＆＃34;行高＆＃34;财产，但似乎不起作用..

如果您设置的行高不在跨度上，而是在父容器上，我将工作：

＆＃13;

<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>

＆＃13;

UPD。 @sai kumar发现了有关CSS规则顺序重要性的有趣细节。为了line-height处理span，它应该放在font属性之后。订单在此非常重要，因为font是一个组合属性，其中还包含line-height。因此，在font之后定义的line-height将使用默认值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提供行高，我已更新您可以检查的代码

＆＃13;

<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>

＆＃13;

Answer 4

将position属性及其值添加为absolute：

<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设置无关。但这取决于字体属性的设置方式。因此可以在简化的设置中进行演示：

＆＃13;

<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>

＆＃13;

减少跨度中的行间距

5 个答案: