0

次のようなhtmlテキストがあります。

  <p>
     Sample <span style="font-weight:bold"> code .... [upto 100 characters]</span>
     <i>italic content</i>
  </p>

として出力したい

  <p>
     Sample <span style="font-weight:bold"> code .... [upto 80 characters]</span>
  </p>
  <p>
     <span style="font-weight:bold">
         [remaining 20 characters]
     </span>
     <i>italic content</i>
  </p>

90 文字のテキストのみを表示する必要があるためです。コンテンツ内の要素を取得することがあるので、ノード要素を正確に分割して適切にレンダリングする必要があります。

jqueryを使用してそれを行う方法を教えてください。

前もって感謝します。

4

3 に答える 3

1

試す

$('p').each(function () {
    var $span = $(this).children('span');
    var text = $span.text();
    $span.text(text.substring(0, 80));
    if (text.length > 80) {
        $('<p />').append($('<span />', {
            text: text.substring(80),
            style: 'font-weight:bold'
        })).append($(this).find('i')).insertAfter(this)
    }
})

デモ:フィドル

于 2013-09-25T02:10:15.667 に答える
0

見た目だけを考えている場合は、span#sample-code { max-width: Any look nice px; を試してください。}

于 2013-09-25T03:03:38.543 に答える
0

サンプル コードとランオフ スパンに要素 ID を追加し、css でスタイルを設定します

 <style>
    #sample-code { font-weight: bold };
    #run-off {font-weight: bold };
 </style>

 <p>
     Sample <span id="sample-code"> code .... [upto 80 characters]</span>
 </p>
 <p>
    <span id="run-off">
     [remaining 20 characters]
    </span>
    <i>italic content</i>
 </p>

次に、ドキュメントがロードされたときにそれを処理します

 $(function(){
    var text = $("#sample-code").text();
    // should probably ensure the length is greater than 80 chars
    var sample = text.substr(0, 80);
    var runoff = text.substr(81);

    $("#sample-code").text(sample);
    $("#run-off").text(runoff);
 });

Jsフィドル

于 2013-09-25T02:14:20.227 に答える