CSS中行高line-height属性的一些如何使用技巧

互联网
在夕阳西下时，伴着如夜晚霞，刮起来美丽的秋风，金黄的叶子从树上落下来，像一只只美丽的蝴蝶，翩翩起舞格外美丽。树下，一个个活泼可爱的小朋友正在捡树叶，放在收集本子里，把美丽的秋天永远珍藏。

先来回顾一下line-height的基础知识：

语法： line-height : normal | <实数> | <长度> | <百分比> | inherit
说明： 设置元素中行的高度。
值： normal：默认行高，一般为1到1.2； 实数：实数值，缩放因子； 长度：合法的长度值，可为负数； 百分比：百分比取值基于元素的字体尺寸。
初始值： normal
继承性： 继承
适用于： 所有元素
媒体： 视觉
计算值： 长度和百分比值为绝对值；其他同指定值。

CSS中的line-height属性控制着两行文本之间的空白多少，通常是会设置成一个无单位数值（比如line-height:1.4），表明其与font-size属性所构成的比例。line-height在排版上是非常重要的一个属性，太低的话，文字的行与行之间会尴尬地挤在一起，太高的话它们又会尴尬地分的太开，无论哪一种都对阅读不利。不过你也许早就知道这一点了。

这篇文章中我们会着重介绍一些技巧，如果你知道（或者能搞清楚）line-height的确切值，你可以做得更有趣 。

为每一行文本指定不同颜色

不幸的是，我们并没有::nth-line这个选择器。我们也不能指望<span>会靠得住，数不清的原因可能导致文本在某处被断开。

有一个办法，虽然不标准，就是利用元素的背景来充当文字的背景。

CSS

也有另一个技巧，你可以用linear-gradient()加上色彩点来控制颜色之间不会互相渐变，让一个颜色结束之后突然开始另一个颜色。我们假设line-height的值为22px，那我们就可以让渐变每逢22px断开一次。

Sass

CSS Code复制内容到剪贴板
  1. .text{
  2. background-image:linear-gradient(
  3. tobottombottom,
  4. #9588DD,
  5. #9588DD22px,
  6. #DD88C822px,
  7. #DD88C844px,
  8. #D3DD8844px,
  9. #D3DD8866px,
  10. #88B0DD66px,
  11. #88B0DD)
  12. }

两个技巧结合之后：

如果你的浏览器不支持text的background-clip，比如Firefox，那你就会看到位于文字背后的色彩长条，可能你会觉得这样看起来很酷甚至会很喜欢，但或许你宁可回到设置文字颜色的老路上来。如果是后者的话，你可以用@support来设置成：如果浏览器支持，css才生效。

另外，既然你反复的在利用line-height的值，说不定把他变成变量比较好。在这里我用SCSS，不过哪天可以使用真正的CSS变量那就真的太棒了，这样在页面渲染完还可以继续修改，并且看着它生效。

Sass

CSS Code复制内容到剪贴板
  1. $lh:1.4em;
  3. body{
  4. font-size:1em;
  5. line-height:$lh;
  6. }
  8. @supports(-webkit-background-clip:text){
  9. p{
  10. -webkit-background-clip:text;
  11. -webkit-text-fill-color:transparent;
  12. background-image:linear-gradient(
  13. tobottombottom,
  14. #9588DD,
  15. #9588DD$lh,
  16. #DD88C8$lh,
  17. #DD88C8$lh*2,
  18. #D3DD88$lh*2,
  19. #D3DD88$lh*3,
  20. #88B0DD$lh*3,
  21. #88B0DD);
  22. }
  23. }

最简单的办法是在最上层的元素中应用这些属性，这里有个样例，它的最初几行是重点。

Sass

CSS Code复制内容到剪贴板
  1. .text{
  2. -webkit-background-clip:text;
  3. -webkit-text-fill-color:transparent;
  4. background-image:linear-gradient(
  5. tobottombottom,
  6. rgba(white,0.8),
  7. rgba(white,0.8)$lh,
  8. rgba(white,0.6)$lh,
  9. rgba(white,0.6)$lh*2,
  10. rgba(white,0.4)$lh*2,
  11. rgba(white,0.4)$lh*3,
  12. rgba(white,0.2)$lh*3,
  13. rgba(white,0.2));
  14. }

如果我们要操控到最末任意行，这将会更难。这样的话，我们就需要色带从头开始一路往下，直到倒数的几行，幸运的是我们可以用calc()来实现。

Sass

CSS Code复制内容到剪贴板
  1. .text{
  2. -webkit-background-clip:text;
  3. -webkit-text-fill-color:transparent;
  4. background-image:linear-gradient(
  5. tobottombottom,
  6. rgba(white,0.8),
  7. rgba(white,0.8)calc(100%-66px),
  8. rgba(white,0.6)calc(100%-66px),
  9. rgba(white,0.6)calc(100%-44px),
  10. rgba(white,0.4)calc(100%-44px),
  11. rgba(white,0.4)calc(100%-22px),
  12. rgba(white,0.2)calc(100%-22px),
  13. rgba(white,0.2));
  14. background-position:bottombottomcenter;
  15. }

也有其他办法可以实现这种效果，比如叠加一层伪元素渐变，并设置pointer-events:none，以免形成干扰。

文字间的线

我们上面介绍了如何控制渐变色彩点，如果用相似的办法，我们可以创建以1px为单位的渐变，并重复直到达到line-height。最简单的办法是使用

repeating-linear-gradient来实现，同时也要保证其他元素乖乖就位（比如padding也是基于line-height）。

Sass

CSS Code复制内容到剪贴板
  1. .parent{
  2. padding:$lh*2;
  3. background:#082838;
  4. background-image:repeating-linear-gradient(
  5. tobottombottom,
  6. rgba(white,0)0,
  7. rgba(white,0)$lh/1em*16px-1,
  8. rgba(white,0.1)$lh/1em*16px-1,
  9. rgba(white,0.1)$lh/1em*16px
  10. );
  11. }

为了创造1px的线，我们需要知道line-height以像素为单位的值，然后减1。减1是为了让渐变会准确的以已知的line-height来重复，并留出最后1px作为线。由于我们让body的font-size为1em，也就是16px，所以line-height的单位被设置为em，你可以通过除去1em来移除单位，然后乘以16px再减1来得到我们需要的数值。

Position images one-per-line

还有一件知道line-height你可以做的事就是，让bakcground-size与其匹配，至少在垂直方向上要匹配。然后你就可以让背景垂直重复，最终效果就是：一行一个图片。

Sass

CSS Code复制内容到剪贴板
  1. .text
  2. background-image:url(image.svg);
  3. background-size:$lh$lh;
  4. background-repeat:repeat-y;
  5. padding-left:$lh*2;
  6. }

以上就是CSS中行高line-height属性的一些如何使用技巧。这年头不缺爱情，缺的是把爱情当回事的人。更多关于CSS中行高line-height属性的一些如何使用技巧请关注haodaima.com其它相关文章！

您可能有感兴趣的文章
CSS黑魔法之计数器counter的如何使用技巧
CSS中的line-height行高属性的如何使用技巧小结
css line-height属性的如何使用技巧
CSS背景图坐标定位详解及负数的如何使用技巧
Firebug 调试器Web开发者应掌握12个初级如何使用技巧