3

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

如何将“-”字符添加到段落的行尾，因此变为：

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

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

谢谢。

4

4 回答 4

5

看看这个小提琴。

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

于 2013-07-22T08:58:56.800 回答
2

我认为@godfrzero 发布了一个很好的答案。

我将发布一个更脆弱的基于 CSS 的解决方案，但说明可以使用背景图像来完成此操作。

请参阅工作演示> http://jsfiddle.net/QESTF/11/

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

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

<p>然后，您可以使用具有的元素包装 的内容，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;
}

同样，这是一种非常脆弱的方法，但在某些情况下它可能是最佳选择。

于 2013-07-22T18:57:08.227 回答
-1

类似的东西？

关注此文

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

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

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

打破最后一行

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

示例：最后一行

'-----

于 2013-07-22T08:45:08.697 回答
-1

试试这个：

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>

CSS

p { text-align: justify; margin:0; }
p:after {
    content:"------";
}

jsfiddle：http: //jsfiddle.net/ZzzXM/

于 2013-07-22T08:46:05.623 回答