1:HTML
<div class="info">
<div class="info_labe">客户须知:</div>
<div class="info_value">
<template>
<el-tooltip
v-if="formInline.guest_remark_desc && formInline.guest_remark_desc.length>=20"
effect="dark"
placement="top"
>
<div v-html="formInline.guest_remark_desc.substring(0,24)" class="info_value" />
<div slot="content" class="tooltip-content">
<div class="info_value" v-html="toBreak(formInline.guest_remark_desc,30)">
{{ formInline.guest_remark_desc }}
</div>
</div>
</el-tooltip>
<div v-else>{{ formInline.guest_remark_desc }}</div>
</template>
</div>
</div>
2:换行函数
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
}
3:css
.info_value{
width: 100%;
color: #000;
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}