文字超过一行的时候隐藏并用...替代（css实现）
今天在项目中碰到了个问题，当文字超过一行的时候隐藏文字并用...代替，刚开始想着是用文字的字数进行限制的，想着用过滤器实现。后来又想到元素所包含的文字字数是不确定的，这种方法行不通，咨询了一下同事，知道了可以直接用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标签
相关文章
图文推荐
- 文章
- 推荐
- 热门新闻