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%);
            }

    效果同上

  • 相关阅读:
    解析HTTP协议六种请求方法
    金蝶
    普元
    中间件
    [CTSC2008] 网络管理
    【Uva 10498】满意值
    【SPOJ839】最优标号
    bzoj2879 [Noi2012]美食节
    bzoj3144 [Hnoi2013]切糕
    bzoj3112 [Zjoi2013]防守战线
  • 原文地址:https://www.cnblogs.com/Shd-Study/p/9945088.html
Copyright © 2011-2022 走看看