:nth-line()

Developer
James Nowland
Size
3,843 Kb
Views
12,144
  1. :nth-line() Previews
  2. :nth-line() HTML Codes
  3. :nth-line() CSS Codes
  4. :nth-line() JS Codes

How do I make an :nth-line()?

This pen uses javascript to get the wanted CSS Selector ::nth-line working so you can have control over lines of text.. What is a :nth-line()? How do you make a :nth-line()? This script and codes were developed by James Nowland on 31 October 2022, Monday.

:nth-line() Previews
IQ Test

:nth-line() - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>:nth-line()</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <header> <h1>This little demonstration should show off how nth line could work, however there is still is problems with this as changing font-size, weight padding can cause a reflow. Resize me!</h1>
</header>
<section> <p>While this code is currently a tad buggy and sloppy. The concept does work. Creative work around could be used to safe guard against any padding /margin changes. However font size changes would kill this. This is more for when you want a colour change. Not size/weight changes. Great for headings that are getting spat out of a CMS.</p> <p>xoxo,<br> <a href="https://www.twitter.com/jnowland">@jNowland</a></p> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</section> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

:nth-line() - Script Codes CSS Codes

body { background: url("http://lorempixel.com/500/800/nature/2/") no-repeat center center fixed; -moz-background-size: cover; -webkit-background-size: cover; -o-background-size: cover; background-size: cover;
}
h1 { max-width: 25em; font-size: 2.1em; color: #fff; padding: 0.5em; line-height: 1.2em; font-family: sans-serif; font-weight: 300;
}
span { padding: 0 0.2em; /*dangerous rule but could add padding to the parent during the calculating*/ margin: 0.1em 0; display: inline-block;
}
section { max-width: 40em; padding: 2em; background: #fff; margin-left: 2em; font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-weight: 300;
}
section a { color: #0DC1F2; font-weight: bold; text-decoration: none;
}
/* How you would use it */
.line-0 { background: #0DC1F2;
}
.line-1 { background: #D92323;
}
.line-2 { background: #D9801D;
}
.line-3 { background: #AD36D9;
}
.line-4 { background: #0DC1F2;
}
.line-5 { background: #D92323;
}
.line-6 { background: #D9801D;
}
.line-7 { background: #AD36D9;
}
.line-8 { background: #0DC1F2;
}
.line-9 { background: #D92323;
}
.line-10 { background: #D9801D;
}
.line-11 { background: #AD36D9;
}

:nth-line() - Script Codes JS Codes

var nthLine = function () { var content = $('h1').text(); var words = content.split(" "); var cache = words[0]; //because we miss the first word as we need to detect the height. var lines = []; //make new object $("header").append('<h1 id="sample">' + words[0] + '</h1>'); var size = $('#sample').height(); var newSize = size; for (var i = 1; i < words.length; i++) { var sampleText = $('#sample').html(); cache = cache + ' ' + words[i]; marker = [i]; $('#sample').html(sampleText + ' ' + words[i]); var newSize = $('#sample').height(); //console.log(newSize); if (size !== newSize) { //remove the word that broke the line. cache = cache.substring(0, cache.length - (words[i].length + 1)); //save the line lines.push(cache); //insert the word back into the storage var cache = words[i]; //regrab size size = $('#sample').height(); } } //pushes the last line. lines.push(cache); //reset cache cache = '' //spits out a string with lines with spans for (var i = 0; i < lines.length; i++) { cache = cache + ' <span class="line-' + [i] + '">' + lines[i] + '</span>' } //nukes the additional element to calc lines $('#sample').remove(); //removes the space that causes problems on resize. cache = cache.substring(1); //prints the result. $('h1').html(cache);
};
nthLine();
//
$(window).resize(nthLine);
:nth-line() - Script Codes
:nth-line() - Script Codes
Home Page Home
Developer James Nowland
Username jnowland
Uploaded October 31, 2022
Rating 4
Size 3,843 Kb
Views 12,144
Do you need developer help for :nth-line()?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

James Nowland (jnowland) Script Codes
Name
CSS3 Stroke and Gradient Text
Login Form CSS only validation
Animating Scale with text featuring blurry raster DPI issues
Three Heading Solutions
Ad Folding without regions
Dribble Button CSS Rebound
SVG Modified with Query String
Letting.js Demo using vanilla js.
Responsive Typography for dummies.
Step 3
Create amazing video scripts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!