javascript - 如何将字符添加到段落的行尾

Question

假设我有这个 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 -->

如何在段落的行尾添加“-”字符，所以变成:

这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。最后一行------------------------------------ 这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。最后一行-------------------------------------------- --------------------------------------------

“-”字符的数量因段落而异，以完成最后一行。 使用背景图片不起作用，因为段落会分成几行。

谢谢。

Answer 1

查看 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>

我们使用的事实是 <p> 的高度当添加新行时元素会发生变化，并在该点之前附加字符。

当然，使用while时要小心像这样的循环，根据您的 HTML 结构，您可能会发现自己处于无限循环中。