css文本超过多行显示省略号兼容所有浏览器

最新推荐文章于 2025-03-24 00:47:58 发布

乙只

最新推荐文章于 2025-03-24 00:47:58 发布

阅读量964

点赞数

分类专栏： CSS 工作bug

本文链接：https://blog.youkuaiyun.com/qq_40664253/article/details/113587787

版权

CSS 同时被 2 个专栏收录

17 篇文章

订阅专栏

工作bug

3 篇文章

订阅专栏

在网上找到的都是用js判断的（https://www.cnblogs.com/zoumiaomiao/p/4952625.html
https://www.cnblogs.com/ChanWunsam/p/10801218.html
https://blog.youkuaiyun.com/z_victoria123/article/details/88948740），但是没用


    methods: {
    	
	   $(document).ready(function(){
			this.wordlimit(".technologyHallContent",55)
		}),
	   async wordlimit(cname,wordlength){ //参数分别为：类名，要显示的字符串长度
         var cname=document.getElementsByClassName(cname);  //需要加省略符号的元素对象
         for(var i=0;i<cname.length;i++){
             var nowhtml=cname[i].innerHTML;                //元素的内容
             var nowlength=cname[i].innerHTML.length;      //元素文本的长度
             if(nowlength>wordlength){
                 cname[i].innerHTML=nowhtml.substr(0,wordlength)+'...';      //截取元素的文本的长度并加上省略号
             }
         }
	   },

报错:
在这里插入图片描述
将$那块换成这样写，不报错了，但是也不起作用。

mounted(){
			this.wordlimit(".technologyHallContent",55)
 },

解决：暂时这样判断的：

 <p class="clamp-limit catalog-des technologyHallContent" v-if="item.des.length>49">描述：{{item.des.substring(0,49)+'...'}}</p>
 <p class="clamp-limit catalog-des technologyHallContent" v-else>描述：{{item.des}}</p>