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、背景色を と同じ背景 background に設定でき.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 に答える