Lining.js
CSS中已经存在了::first-line
选择器可以用来设置第一行文字的样式。但是目前还没有选择器可以设置任意行的样式,例如:::nth-line()
、::nth-last-line()
或者::last-line
这样的。CSS tricks上有一篇文章A Call for ::nth-everything描述了此类选择器的使用场景。
于是我写了这个js插件Lining.js。它和Lettering.js类似为文字段落生成行标签text-line
,便可以让你控制段落中任意行的样式!DEMO如下:
<div class="poem" data-lining>Some text...</div>
<style>
.poem .line[first] { /* `.poem::first-line`*/ }
.poem .line[last] { /* `.poem::last-line` */ }
.poem .line[index="5"] { /* `.poem::nth-line(5)` */ }
.poem .line:nth-of-type(-n+2) { /* `.poem::nth-line(-n+2)` */ }
.poem .line:nth-last-of-type(2n) { /* `.poem:::nth-last-line(2n)` */ }
</style>
<script src="YOUR_PATH/lining.min.js"></script>
支持的浏览器: