html - CSS calc() - 将 4px 添加到 "normal"行高

Question

我想使用 CSS calc() 将 4px 添加到元素的当前“正常”行高。不幸的是，“normal”不是 calc() 识别的值，但它是行高的默认值(例如 line-height:normal)。因此，以下内容不起作用:

*.mystyle{
line-height: calc(normal + 4px);
}

如何将 4px 添加到元素的“正常”行高？

最后，虽然标题几乎相同，但这不是 line-height property: normal + 4px 的重复由于已接受的答案与 OP 想要做的事情无关。

Answer 1

问题:

你不能单独使用 CSS 来做到这一点。看看这个摘录 from the MDN :

Formal syntax

calc( <calc-sum> )

where
<calc-sum> = <calc-product> [ [ '+' | '-' ] <calc-product> ]*

where
<calc-product> = <calc-value> [ '*' <calc-value> | '/' <number> ]*

where
<calc-value> = <number> | <dimension> | <percentage> | ( <calc-sum> )

该值必须是数字、维度或百分比。

---

解决方案:

_{^{(虽然我意识到 JavaScript 不是特别要求的，但我宁愿不让这个答案缺乏真正的解决方案。)}}

另一种方法是使用 jQuery。

棘手的部分是计算 CSS normal 的内容行高代表。

我们可以通过记录内容的高度、向其添加一行并记录新的高度来做到这一点——这两个数字之间的差异是px中的实际行高。 .

$(".mystyle").each(function() {
    $t = $(this);
    var $clone = $t.clone();
    $t.parent().append($clone);             //Clone the element

    var initialHeight = $clone.height();    //Get its height
    $clone.append("<br><br>");              //Add a line
    var newHeight = $clone.height();        //Get new height
    var lh = newHeight - initialHeight;     //Difference them to calc line-height in px

    $clone.remove();                        //Clean up

    $t.css("line-height", lh+4+"px");       //Set the new line-height
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mystyle">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eu nunc nec tortor lobortis euismod at in nunc. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed ac turpis laoreet, placerat est nec, vehicula
  magna. Vivamus volutpat enim eget neque convallis, elementum accumsan tortor viverra. Morbi faucibus, lorem in laoreet malesuada, felis orci consectetur magna, eget convallis urna nisl at diam. Duis sapien dui, interdum nec ipsum a, porttitor tincidunt
  dolor. Donec ullamcorper eros ac elit pharetra malesuada. Duis placerat ullamcorper libero nec volutpat. Phasellus fermentum eget erat non posuere. Donec orci est, rhoncus a semper et, volutpat sed nisl. Morbi dictum lorem sed justo eleifend congue.
</div>