Open luqin opened 9 years ago
Lining.js是用来处理带有元素的单独行的库。 你只需要在元素上增加data-lining属性,就可以使用Lining.js,然后使用CSS来设置它的样式。
在CSS中我们已经拥有::first-line这个选择器,可以在元素的第一行上应用样式。 但并没有类似于::nth-line()、::nth-last-line()或者::last-line之类的选择器。 Lining.js对你的文本提供了完整的行控制,如下示例所示:
<div class="poem" data-lining="">Some text...</div> <style type="text/css">.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>
现在,Lining.js只支持主要浏览器,像Chrome、Firefox、Safari和Opera。 但不支持IE。
Lining.js是用来处理带有元素的单独行的库。 你只需要在元素上增加data-lining属性,就可以使用Lining.js,然后使用CSS来设置它的样式。
在CSS中我们已经拥有::first-line这个选择器,可以在元素的第一行上应用样式。 但并没有类似于::nth-line()、::nth-last-line()或者::last-line之类的选择器。 Lining.js对你的文本提供了完整的行控制,如下示例所示:
现在,Lining.js只支持主要浏览器,像Chrome、Firefox、Safari和Opera。 但不支持IE。