I have a a div with multiple p elements within it. I wanted to know how I can limit the character length of the first p element within each div of the same class. 

HTML

```
<div class="el">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates natus dignissimos architecto deserunt totam ullam, nulla ipsum cumque alias possimus dicta officiis provident mollitia modi tempore officia porro tenetur dolor.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias quidem, ad doloribus reiciendis debitis sit suscipit est cumque voluptates corporis adipisci consectetur, perspiciatis quo pariatur minima inventore omnis deleniti assumenda!</p>
</div>

```

Javascript (so far)

```
var quote = document.querySelectorAll('.el');

for (var i=0, len=quote.length; i < len; i++) {

  var text = quote[i].firstElementChild.innerHTML;
  console.log(text);

  if(text.length > 150) {
    console.log("condition met");
    text = text.substring(0,150) + '<a href="#">Read more</a>';
  }
}

```

I think I'm right up until I try to edit the length of text itself. But help would be appreciated along with explanation of what I'm doing wrong. I've set up a fiddle [for your convenience](https://jsfiddle.net/vdecree/gemszha5/).