How to Select Nth Line of Text (Css/Js)

How to select nth line of text (CSS/JS)

Interesting. You can do something like that with JavaScript:

$(function(){ 
  var p = $('p'); 
  var words = p.text().split(' '); 
  var text = ''; 
  $.each(words, function(i, w){
                   if($.trim(w)) text = text + '<span>' + w + '</span> ' }
        ); //each word 
  p.html(text); 
  $(window).resize(function(){ 

    var line = 0; 
    var prevTop = -15; 
    $('span', p).each(function(){ 
      var word = $(this); 
      var top = word.offset().top; 
      if(top!=prevTop){ 
        prevTop=top; 
        line++; 
      } 
      word.attr('class', 'line' + line); 
    });//each 

  });//resize 

  $(window).resize(); //first one
});

Basically, we wrap each word with a span, and add a class based on the position of the span, whenever the window resizes. I'm sure it can be done more efficiently, but it works as a proof of concept. Of course, for even/odd lines, you can simplify the code.

Edge cases: I didn't test it where the class changes the size or width of the words. It may end up very wrong.

Here it is in action: https://jsbin.com/piwizateni/1/edit?html,css,js,output

Extract nth line of a paragraph using <br>

You don't need the break tags if you want to get the text by line. You just need line breaks in the text itself. You can use a function like this:

function getTextByLine(target, line) {
  var text = document.querySelector(target).innerHTML
  return text.trim().split('\n')[line - 1]
}

Test it on jsfiddle here.

Update

If you want to use the break tags you can do that as well.

function getTextByLine(target, line) {
  var text = document.querySelector(target).innerHTML
  var lines = text.trim().split('<br>').filter(function(str) {
    return str !== '<br>'
  })
  return lines[line - 1]
}

Fiddle here.

Change font-size by nth line

// long array of “names” (just lorem ipsum words here)var names = 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.'.split(' ');
var container = $('#container'),    offsetTop = newOffsetTop = 0,    fontSize = 3;
for(var i=0, l=names.length; i<l; ++i) {    var span = $('<span/>').text(names[i]+' ');    container.append(span);    newOffsetTop = span.position().top;    if(newOffsetTop > offsetTop) {        fontSize *= .9;    }    span.css('font-size', fontSize+'rem');    offsetTop = newOffsetTop;}

#container {    position:relative;    background:#ccc;    text-align:justify;}#container:after {    content:'';    display:inline-block;    width:100%;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><div id="container"></div>