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

默认属性：

  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 @ 2019-12-23 20:02  磊~~  阅读(492)  评论(0)    收藏  举报