多行文本溢出显示省略号(…)全攻略

默认属性：

  1. overflow: hidden;
  2. text-overflow: ellipsis;
  3. white-space: nowrap;
WebKit浏览器或移动端的页面
  1. overflow : hidden;
  2. text-overflow: ellipsis;
  3. display: -webkit-box;
  4. -webkit-line-clamp: 2;
  5. -webkit-box-orient: vertical;

实例：https://www.html.cn/archives/5206

复制代码
<style>
    .demo {
        position: relative;
        line-height: 20px;
        height: 40px;
        overflow: hidden;
    }
    .demo::after {
        content: "...";
        position: absolute;
        bottom: 0;
        right: 0;
        padding: 0 20px 0 10px;
    }
</style>

<body>
    <div class='demo'>这是一段很长的文本</div>
</body>
复制代码

 

posted @   磊~~  阅读(481)  评论(0)  编辑  收藏  举报
相关博文：
· css 清除浮动
· offsetTop和scrollTop的差别
· 文本溢出显示省略号
· 多行文本溢出显示省略号的方法
· 文本溢出显示省略号
阅读排行：
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本
· Manus爆火，是硬核还是营销？
· 终于写完轮子一部分：tcp代理 了，记录一下
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通
点击右上角即可分享
微信分享提示