_yangyi 2022-04-14 16:32 采纳率: 60%
浏览 63
已结题

js如何把一个标签分割成多个相同的标签

比如下面的一个span标签，我想分成四个span标签，并且都带有当前span标签的样式

<p style="line-height: 1.5;">
    <span style="font-size: 18.6667px;">低价出口大幅扩大那你就快点快点四年
电脑就看看是肯定四大皆空封建士大夫附件是肯定菲尼克斯的就是打开飞机
喀什地方的飞机喀什地方建设的积分空手道解放是福克斯的肌肤上的纠纷的
设计方式打开放声大哭分四十四发地方适当方式就打发士大夫谁的粉是发送
大附件是否是否是发谁的粉上的发速度发速度饭卡手动阀士大夫山地车上的
发都是纷纷开始附件是的方式电风扇电风扇就的尝试多次受到从收到甲方收
款方式发士大夫士大夫积分说服大家都是士大夫看书打发时间的发射点飞机
大师傅发射点发你士大夫士大夫发生的看房的芳菲你但凡封建士大夫谁的粉
发的说法就是防水等级发射点发生大家士大夫十分到家士大夫士大夫发的是
封建士大夫都是发速度</span>
</p>

<p style="line-height: 1.5;">
      <span style="font-size: 18.6667px;">低价出口大幅扩大那你就快点快点四年电脑就看看是肯定四
大皆空封建士大夫附件是肯定菲尼克斯的就是打开飞机喀什地方的</span>
      <span style="font-size: 18.6667px;">飞机喀什地方建设的积分空手道解放是福克斯的肌肤上的纠纷的设计
方式打开放声大哭分四十四发地方适当方式</span>
      <span style="font-size: 18.6667px;">就打发士大夫谁的粉是发送大附件是否是否是发谁的粉上的发速度发速
度饭卡手动阀士大夫山地车上的发都是纷纷开始附件是的方式
电风扇电风扇就的尝试多次受到从收到甲</span>
      <span style="font-size: 18.6667px;">方收款方式发士大夫士大夫积分说服大家都是士大夫看书
打发时间的发射点飞机大师傅发射点发你士大夫士大夫发生的看房的芳菲你但凡封建士大夫谁的
粉发的说法就是防水等级发射点发生大家士大夫十分到家士大夫士大夫发的是封建士大夫都是发速度</span>
</p>

请各位都说说各自的看法

  • 写回答

5条回答 默认 最新

  • 溪风沐雪 2022-04-14 16:54
    关注

    我把文本四等分做了个例子，你参考一下：

    <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script src="./jquery-3.0.0.min.js"></script>
        <script>
            $(document).ready(function(){
                var old_span = $("#old_span");
                var content = old_span.text();
                for(var i=0;i<4;i++){
                    var new_span = $("<span>"+content.substring(content.length/4*i, content.length/4*(i+1)) +"</span></br>");
                    new_span.css('font-size',old_span.css('font-size'))
                    new_span.appendTo(old_span.parent());
                }
                old_span.remove();
                console.log(content);
            });
        </script>
    </head>
    <body>
        <div>
            <p style="line-height: 1.5;">
                <span id="old_span" style="font-size: 18.6667px;">低价出口大幅扩大那你就快点快点四年
            电脑就看看是肯定四大皆空封建士大夫附件是肯定菲尼克斯的就是打开飞机
            喀什地方的飞机喀什地方建设的积分空手道解放是福克斯的肌肤上的纠纷的
            设计方式打开放声大哭分四十四发地方适当方式就打发士大夫谁的粉是发送
            大附件是否是否是发谁的粉上的发速度发速度饭卡手动阀士大夫山地车上的
            发都是纷纷开始附件是的方式电风扇电风扇就的尝试多次受到从收到甲方收
            款方式发士大夫士大夫积分说服大家都是士大夫看书打发时间的发射点飞机
            大师傅发射点发你士大夫士大夫发生的看房的芳菲你但凡封建士大夫谁的粉
            发的说法就是防水等级发射点发生大家士大夫十分到家士大夫士大夫发的是
            封建士大夫都是发速度</span>
            </p>
        </div>
    </body>
</html>

    img


    拆分后的效果就是这样，不是等分的话你需要按照规则截取一下内容。
    如有帮助，请采纳！

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(4条)

报告相同问题？

问题事件

  • 系统已结题 4月27日
  • 已采纳回答 4月19日
  • 创建了问题 4月14日

悬赏问题

  • ¥15 素材场景中光线烘焙后灯光失效
  • ¥15 请教一下各位，为什么我这个没有实现模拟点击
  • ¥15 执行 virtuoso 命令后，界面没有，cadence 启动不起来
  • ¥50 comfyui下连接animatediff节点生成视频质量非常差的原因
  • ¥20 有关区间dp的问题求解
  • ¥15 多电路系统共用电源的串扰问题
  • ¥15 slam rangenet++配置
  • ¥15 有没有研究水声通信方面的帮我改俩matlab代码
  • ¥15 ubuntu子系统密码忘记
  • ¥15 保护模式-系统加载-段寄存器