css省略号单行多行实现

参考参照

单行

<style> 
.demo { 
    heigh:300px;
    width:300px;
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
} 
</style> 
<body> 
    <div class="demo">文字文字文字文字很长很长很长</div>
</body>

多行文本溢出省略

-webkit-line-clamp: 2;(用来限制在一个块元素显示的文本的行数, 2 表示最多显示 2 行。 为了实现该效果,它需要组合其他的WebKit属性)

<style> 
.demo { 
    display: -webkit-box; 
    overflow: hidden; 
    -webkit-line-clamp: 2; 
    -webkit-box-orient: vertical; 
} 
</style> 
<body> 
    <div class='demo'>文字文字文字文字很长很长很长</div> 
</body>

缺点

兼容性一般: -webkit-line-clamp 属性只有 WebKit 内核的浏览器才支持

利用 Float 特性,纯 CSS 实现多行省略

<style> 
    .demo { 
        background: #099; 
        max-height: 40px; 
        line-height: 20px; 
        overflow: hidden; 
    } 
    .demo::before{ 
        float: left;
        content:''; 
        width: 20px; 
        height: 40px; 
    } 
    .demo .text {
        float: right; 
        width: 100%; 
        margin-left: -20px;
        word-break: break-all;
    } 
    .demo::after{ 
        float:right; 
        content:'...'; 
        width: 20px; 
        height: 20px;
        position: relative; 
        left:100%; 
        transform: translate(-100%,-100%);
    } 
</style> 
<body> 
    <div class='demo'> 
        <div class="text">文字文字文字文字很长很长很长 ~~~~</div>
    </div> 
</body>
原文链接:segmentfault.com

上一篇:css中 white-space 属性
下一篇:web前端面试题-移动开发篇(持续更新...)

相关推荐

官方社区

扫码加入 JavaScript 社区