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: 任何看起来不错的 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);
 });

提琴手

于 2013-09-25T02:14:20.227 回答