css截断长文本显示

欲休

发布于 2018-03-15 13:39:18

1.6K0

发布于 2018-03-15 13:39:18

文章被收录于专栏：前端杂货铺

实现

截断长文本显示处理，以前是通过后台的截取，但这种方法容易丢失数据，不利于SEO。

而通过前端css的截断，则灵活多变，可统一运用与整个网站。

这项技术主要运用了text-overflow属性，这个虽是css3的属性，但是在各大浏览器却兼容

非常好，ie6系列全部兼容。

        .e{
            display:inline-block;width: 40px;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;
        }
        .e:hover{
            cursor: pointer;text-overflow: clip;width: auto;
        }    

 <span class='e'>abcdddsdsafdsacdsavdsac</span>

宽度需要指定，这样设置隐藏的宽度，而且也可出发IE67的hasLayout。

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

css

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

css

登录后参与评论

0 条评论

热度

css截断长文本显示

css截断长文本显示

实现

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐