Javascript 如何在第'段中添加字符；s线的终点

假设我有以下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 -->

p{文本对齐：对齐；边距：0；}
这是一段。这是一段。这是一段。这是一段。这是一段。这是一段。这是一段。这是一段。这是一段。这是一段。这是一段。这是一段。这是一段。最后一行
这是一段。这是一段。这是一段。这是一段。这是一段。这是一段。这是一段。这是一段。这是一段。这是一段。这是一段。最后一行

如何在段落的行尾添加“-”字符，以便：

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

为完成最后一行，段落之间的“-”字符数量有所不同。 使用背景图像不起作用，因为段落会断行

谢谢。

类似的东西

示例：最后一行------

可以在元素之后添加“添加内容/效果”的属性

> p:after{clear:both;content:"--------";}

示例：最后一行

'----

试试这个：

HTML

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

jsIDLE:

签出

.someWrapper{宽度：500px；}

这是一段。这是一段。这是一段。
这是一段。这是一段。这是一段。
这是一段。这是一段。这是一段。
这是一段。这是一段。这是一段。
这是一段。最后一行

var$someparagration=$（'.someWrapper p'），
originalHeight=$some段落.height（）；
while（$some段落.height（）==原始高度）{
var paraContents=$someparagration.html（）；
$someparagration.html（paraContents+'-'）；
}
//您将得到一个额外的字符，只需使用内容即可
//从上一次迭代开始
$someparagration.html（paraContents）；

我们使用的是这样一个事实，即当添加新行时，

元素的高度会发生变化，并在该点之前添加字符

当然，在使用

时要小心，而像这样的循环取决于您的HTML结构，您可能会发现自己处于无限循环中。
我认为

我将发布一个更脆弱的基于CSS的解决方案，但说明了使用背景图像可以实现这一点

请参见工作演示


如果使用的背景图像的高度与文本行的高度大致相同，则可以将其与底部对齐并水平重复

.someWrapper {
  background: #fff url('http://regexpal.com/assets/link.gif') 100% 100% repeat-x;
}

然后，您可以使用具有
display:inline
的元素包装
的内容，并将背景颜色设置为与
相同的背景色。someWrapper

<div class="someWrapper">
  <p><span>This is a paragraph. This is a paragraph. {repeat}</span></p>
</div>

.someWrapper p span {
  background: white;
  padding-right: 2pt;
}


这是一段。这是一段。{重复}

.somep span{
背景：白色；
右侧填充：2pt；
}

同样，这是一种非常脆弱的方法，但在某些情况下，它可能是最好的选择。
你想使用javascript吗？javascript可以接受：）每个段落都有@jessegavin哇，这可能是我第一次看到一个原始的纯CSS解决方案。在背景一致的情况下，这肯定更好。为什么htis会被否决？这是最好的答案。
<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>

.someWrapper {
  background: #fff url('http://regexpal.com/assets/link.gif') 100% 100% repeat-x;
}

<div class="someWrapper">
  <p><span>This is a paragraph. This is a paragraph. {repeat}</span></p>
</div>

.someWrapper p span {
  background: white;
  padding-right: 2pt;
}