html css 设置文本超出区域隐藏并显示...省略号

最终实现效果截图如下

html css 设置文本超出区域隐藏并显示...省略号

实际效果可在本站首页观看。

弈心博客_一个关于梦想成长和奋斗的励志网站

html 代码

html 代码毫无花哨,就是平凡无奇的 div

<a href="https://www.yixzm.cn">
    <div id="yixzm">弈心博客_一个关于梦想成长和奋斗的励志网站</div>
</a>

css 代码

#yixzm {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

没错,CSS代码只有4行,就是这么简单。

版权声明

弈心博客


本文首发site_name,转载请附上博文链接!