Your Web News in One Place

An Interest In:

Web News this Week

Search Archive

Some of Our Sources

View All Sources

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
May 30, 2015 08:00 am GMT

Lining.js: Controlling Text Lines per CSS Selector

The numerous available CSS selectors let us easily access almost each and every HTML element on any given page. The pseudo-element ::first-lineeven allows us to apply CSS properties to the first line of text in a document, no matter whether the line is automatically or manually wrapped. Unfortunately, besides ::first-line there are no selevtors to manipulate the second, third, last or whichever line. The JavaScript library Lining.js is here to pimp your possibilities. .line[last] Instead of ::last-line Similar to the selectors ::last-child and ::nth-child() that allow you to touch the last or any random child element, Lining.js adds behaiviors for lines of text. INstead of using the (non-existing) selectors ::last-line and ::nth-line(n), the library introduces the classes .line[last] and .line[index="n"]. After having embedded the library into your document, start with assigning the data attribute data-lining to every text element you want to manipulate with Lining.js. THe attribute expects no value. 1 2 3 <p data-lining> Lorem ipsum </p> Then use these classes to individually markup lines within the text per CSS. 1 2 3 4 5 6 7 p .line[last] { color: red; } p .line[index="2"] { font-weight: bold; } .line[last] and .line[index="2"] active on a text In […]

Original Link: http://feedproxy.google.com/~r/Noupe/~3/6ogHCoMi2mk/lining-js-controlling-text-lines-per-css-selector-92031.html

Share this article:    Share on Facebook
View Full Article

Noupe

Noupe passionately delivers stylish and dynamic news for designers and web-developers across the globe on all subjects of design

More About this Source Visit Noupe