zoukankan      html  css  js  c++  java
  • css不受高度限制实现文本超出隐藏并以省略号结束

    文本超出省略号显示代码:

    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
    100px; /*宽度做好限制*/

    文本文本文本文本文本...

    不考虑兼容性的,适用于WebKit浏览器内核的
     100px;
    height: 65px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; /*截取到第三行*/ overflow: hidden;

    文本文本文本文本文本

    文本文本文本文本文本

    文本文本文本文本文...

    容器设置溢出隐藏、并手动设置生成一个内容为“...”的伪元素
     .box {
                 400px;
                height: 100px;
                margin: 100px auto;
                border: 1px solid #ccc;
                position: relative;
                line-height: 20px;
                overflow: hidden;
            }
    
            .box::after {
                content: "...";
                position: absolute;
                bottom: 0;
                right: 0;
                padding-left: 10px;
                background: -webkit-linear-gradient(left, transparent, #fff 55%);
                background: -o-linear-gradient(right, transparent, #fff 55%);
                background: -moz-linear-gradient(right, transparent, #fff 55%);
                background: linear-gradient(to right, transparent, #fff 55%);
            }

    效果同上

  • 相关阅读:
    three.js详解
    Javascript的原型
    Transform? Transition? Animation?
    Backbone源码分析Backbone架构+流程图
    对象是引用的注意原型中的属性改变
    MySQL+ JSP+Tomcat開發指引
    MySQL應用分析
    SQL 日期
    MySQL安裝
    MSE错误应对分享
  • 原文地址:https://www.cnblogs.com/Shd-Study/p/9945088.html
Copyright © 2011-2022 走看看