vue中兼容ie的多行文本溢出省略

news/2024/7/9 23:39:06 标签: vue, html

1.在html文件中

  <div class="sldiv" style="overflow: hidden; word-break: normal; word-wrap: break-word; max-width: 179px">
        1111111111111111111111111111111111111111111111111111111111
   </div>

1.1封装成了一个函数,是控制字数多少来添加省略号

   function wordlimit(cname,wordlength){
        var cname=document.getElementsByClassName(cname);
        console.log(cname);
        console.log(cname[0]);
        for(var i=0;i<cname.length;i++){
            console.log(cname.length);
        var nowhtml=cname[i].innerHTML;
        var nowlength=cname[i].innerHTML.length;
        if(nowlength>wordlength){
        cname[i].innerHTML=nowhtml.substr(0,wordlength)+'......';
        }
        }
        }
        wordlimit('sldiv',20)

在这里插入图片描述

2.在html" title=vue>vue中

  <p class="detail" v-html="item.content"></p>
  mounted() {
    this.$nextTick(function(){
      this.wordlimit('detail', 119)
    })
  },

2.1要加个定时器,不加定时器获取不到dom元素

 methods: {
    wordlimit(cname, wordlength) {
        setTimeout(() => {
      let cnamec = document.getElementsByClassName(cname)
      for (let i = 0; i < cnamec.length; i++) {
        var nowhtml=cnamec[i].innerHTML;
        var nowlength=cnamec[i].innerHTML.length;
        if(nowlength>wordlength){
        cnamec[i].innerHTML=nowhtml.substr(0,wordlength)+'......';
        }
      }
      }, 200)
    },
  }

http://www.niftyadmin.cn/n/1512074.html

相关文章

schtasks命令遇见ERROR: The request is not supported.

执行schtasks命令的环境&#xff0c;下文为机器1&#xff1a;windows server 2008 r2 工作任务&#xff08;Schedules&#xff09;所在的机器环境&#xff0c;下文为机器2&#xff1a;windows server 2003 当在机器1中通过命令schtasks来监测机器2中的工作任务运行状况时&#…

ElementUI中el-upload上传图片组件上传成功函数传自定义参数

1.在做添加试题时,要给每一个试题选项上传图片,需要把每个图片存储的位置与选项 对应, 需要向函数传递一个自定义的参数来表示图片存的位置,可是发现上传成功的函数无法传自定义的参数 官方文档: 2.通过查资料了解到一种方式 :on-success"(res,file)>{handleAvatarSucc…

urllib3学习笔记

urllib3学习笔记 urllib3简介 ​ urllib3是个功能强大、条理清晰&#xff0c;用于HTTP客户端的第三方模块&#xff0c;许多Python的原生系统已经开始使用urllib3。urllib3提供了很多Python标准库里没有的重要特性&#xff1a; • 线程安全 • 连接池 • 客户端SSL/TLS验证…

剑指offer--面试题9

题目一&#xff1a;求斐波那契数列第n项 自己所写代码如下&#xff1a; #include "stdafx.h" #include<iostream>long Fibonacci(unsigned int N) {long F0 0;long F1 1;if(N 0)return F0;else if(N 1)return F1;else{int n 2;while(n < N){F0 F0 F1…

请求模块requests

请求模块requests requests是Python中实现HTTP请求的一种方式&#xff0c;requests是第三方模块&#xff0c;该模块在实现HTTP请求时要比urllib、urllib3模块简化很多&#xff0c;操作更加人性化。 请求方式 由于requests模块为第三方模块&#xff0c;所以在使用requests模块…

使用$router.push跳转点击两次会报错

1.解决方法 this.$router.push({path:/index},onComplete > {},onAbort > {})

页面滚动到顶部

// 滚动顶部this.$nextTick(() > {window.scrollTo(0, 0)})

高级网络请求模块

高级网络请求模块 Requests-Cache的安装与测试 Requests-Cache模块是requests模块的一个扩展功能&#xff0c;用于为requests模块提供持久化缓存支持。如果requests模块向一个URL发送重复请求时&#xff0c;Requests-Cache模块将会自动判断当前的网络请求时否产生了缓存。如果…