: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 04 January 2022, Tuesday.

How do I make an :nth-line()?
  1. :nth-line() Previews
  2. :nth-line() HTML Codes
  3. :nth-line() CSS Codes
  4. :nth-line() JS Codes
:nth-line() Previews

:nth-line() 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() 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() 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);
Do you want hide your ip address?Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup.