2015年5月30日 星期六

Lining.js: Controlling Textual content Strains per CSS Selector

The quite a few out there CSS selectors allow us to simply entry virtually each HTML factor on any given web page. The pseudo-component ::first-line even permits us to use CSS properties to the primary line of textual content in a doc, regardless of whether or not the road is mechanically or manually wrapped. Sadly, apart from ::first-line there are not any selevtors to control the second, third, final or whichever line. The JavaScript library Lining.js is right here to pimp your prospects. .line[last] As an alternative of ::final-line Just like the selectors ::final-youngster and ::nth-baby() that help you contact the final or any random baby factor, Lining.js provides behaiviors for strains of textual content. INstead of utilizing the (non-present) selectors ::final-line and ::nth-line(n), the library introduces the courses .line[last] and .line[index=”n”]. After having embedded the library into your doc, begin with assigning the info attribute knowledge-lining to each textual content aspect you need to manipulate with Lining.js. THe attribute expects no worth. 1 2 three

Lorem ipsum …

Then use these courses to individually markup strains inside the textual content per CSS. 1 2 three four 5 6 7 p .line[last] shade: purple; p .line[index=”2″] font-weight: daring; .line[last] and .line[index=”2″] lively on a textual content In […]

張貼者： 於
標籤：

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)