CODEWITHSUNDEEP
javascriptjqueryhtml
user1268130
user1268130

Reputation: 923

split the node elements using jquery

I have html text as follows:

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

I want to output as

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

As i need to show only 90 text characters. sometimes I get elements in the content,so i need to break the node elements exactly and render properly.

Please can any one help me how to do it using jquery.

Thanks in Advance.

Upvotes: 0

Views: 77

Answers (3)

Ken Chan
Ken Chan

Reputation: 9

If you are only going for the look, try span#sample-code { max-width: whatever look nice px; }

Upvotes: 0

Arun P Johny
Arun P Johny

Reputation: 388396

Try

$('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)
    }
})

Demo: Fiddle

Upvotes: 1

Jason
Jason

Reputation: 15931

Add element ids to the sample code & run-off spans, style them with 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>

then when the document loads process it

 $(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);
 });

JsFiddle

Upvotes: 0

Related Questions