核心提示:今天在项目中碰到了个问题,当文字超过一行的时候隐藏文字并用...代替,刚开始想着是用文字的字数进行限制的,想着用过滤器实现。后来又想到元素所包含的文字字数是不确定的,这种方法行不通,咨询了一下同事,知...
今天在项目中碰到了个问题,当文字超过一行的时候隐藏文字并用...代替,刚开始想着是用文字的字数进行限制的,想着用过滤器实现。后来又想到元素所包含的文字字数是不确定的,这种方法行不通,咨询了一下同事,知道了可以直接用css实现,记录一下。
啥也不多说了,直接上代码
.issueInfo_news_con p{ word-break:break-all; text-overflow:ellipsis; display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/ -webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/ -webkit-line-clamp:1 ; /** 显示的行数 **/ overflow: hidden; /** 隐藏超出的内容 **/ font-size:0.12rem; color:#BDBCCF ; cursor:default; text-indent: 0em; }
用法就是直接把样式加在要限制的元素上面就可以了,如代码所示,我限制的是p标签