vue Tooltip提示动态换行问题，间隔指定字符数换行

问题描述：

使用element 组件el-table，表格某一列字段过长，采用el-tooltip进行提示，但提示中的内容过长不能换行展示。如图1

图1

对列表内容重置：

<template slot-scope="scope">
    {{scope.row.explainContent}}
</template>

 对提示内容设置：

 

完整代码： 

<el-table-column prop="explainContent"label="备注内容">
    <template slot-scope="scope">
        <el-tooltip effect="dark" placement="right-start" 
            v-if="scope.row.explainContent.length>=15">
            <div v-html="scope.row.explainContent.substring(0,15)"></div>
            <div slot="content" class="tooltip-content">
                <div class="tip_div" v-html="toBreak(scope.row.explainContent,30)"> 
                   {{scope.row.explainContent}}
                </div>
            </div>
        </el-tooltip>
        <div v-else>{{scope.row.explainContent}}</div>
    </template>
</el-table-column>

toBreak(val, num) {
    //备注内容提示过长。强制间隔20个字符换行
    var str = val;
    var number = num;//间隔换行的字符数
    var bytesCount = 0;//定义一个变量记录字符串总字节长度
    var s = "";//定义一个空字符串用来接收重新拼接换行之后的字符串
    var pattern = new RegExp("[\u4E00-\u9FA5]+");//汉字的正则表达式
    for (var i = 0; i < str.length; i++) {//遍历原字符串
        var c = str.charAt(i);//拿到每一个下标对应的值
        // 统计字符串的字符长度
        if (pattern.test(c)) {
            bytesCount += 2;//如果是汉字长度+2
        } else {
            bytesCount += 1;//不是汉字长度+1
        }
        s += str.charAt(i);//重新拼接字符串
        // 换行
        if (bytesCount >= number) {//在指定的长度位置插入换行标签
            s = s + '<br>';
            // 重置
            bytesCount = 0;//保证在下一个相同长度后继续换行
        }
    }
    return s;
}

呈现效果：