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

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

看看这个小提琴。

<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 结构，您可能会发现自己处于无限循环中。