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

Answer 2

我认为@godfrzero posted an excellent answer。

我将发布一个更脆弱的基于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;
}

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

Answer 3

那样的东西？

Follow this text

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

您可以在元素

之后添加添加内容/效果的属性

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

Break last line

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

示例：最后一行

“-----

Answer 4

试试这个：

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

如何将chars添加到段落的行尾

4 个答案: