How to add chars to paragraph's end of line

css, html, javascript

Solution

Check out this fiddle.

<style>
  .someWrapper { width: 500px; }
</style>


<div class="someWrapper">
  <p>
     This is a paragraph. This is a paragraph. This is a paragraph. 
     This is a paragraph. This is a paragraph. This is a paragraph. 
     This is a paragraph. This is a paragraph. This is a paragraph. 
     This is a paragraph. This is a paragraph. This is a paragraph. 
     This is a paragraph. Last line
  </p>
</div>


<script>
  var $someParagraph = $('.someWrapper p'),
      originalHeight = $someParagraph.height();

  while( $someParagraph.height() === originalHeight ) {
    var paraContents = $someParagraph.html();
    $someParagraph.html( paraContents + '-' );
  }

  // You'll end up with one extra character, just use the contents
  // from the beginning of the previous iteration
  $someParagraph.html( paraContents );
</script>

We're using the fact that the height of the `<p>` element changes when a new line is added to our advantage, and appending characters until just before that point.

Of course, be careful when using `while` loops like this, depending on your HTML structure, you might find yourself inside an infinite loop.

Problem

Suppose I have this html: ``` <style> p { text-align: justify; margin:0; } </style> <p>This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. Last line <p>This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. Last line <!-- more paragraphs --> ``` How to add "-" chars to paragraph's end of line, so become: This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. Last line --------------------------------------- This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. Last line ------------------------------------------------------------------------------------------- Amount of "-" character varies between paragraph to complete the last line. Using background image does not work, as paragraph breaks into lines. Thanks.

Original source