vue 文字超出以...显示，鼠标放上去换行显示全部_一个div单行展示,超出长度显示。。。,鼠标放上去显示完

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

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
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

3:css

.info_value{
        width: 100%;
        color: #000;
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
1
2
3
4
5
6
7
8