美文网首页
css文本溢出

css文本溢出

作者: 糯米小馒头 | 来源:发表于2018-03-03 12:01 被阅读0次

    A css实现单行文本溢出显示 ...

    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
    当然还需要加宽度width属来兼容部分浏览器。
    

    B 实现多行文本溢出显示...

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    适用范围:因使用了WebKit的CSS扩展属性,该方法适用于WebKit浏览器及移动端;
    
    1、-webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果,它需要组合其他的WebKit属性。常见结合属性:
    2、display: -webkit-box; 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。
    3、-webkit-box-orient 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式 。
    

    C改变placeholder的字体颜色大小

    input::-webkit-input-placeholder { 
        /* WebKit browsers */ 
        font-size:14px;
        color: #333;
    } 
    input::-moz-placeholder { 
        /* Mozilla Firefox 19+ */ 
        font-size:14px;
        color: #333;
    } 
    input:-ms-input-placeholder { 
        /* Internet Explorer 10+ */ 
        font-size:14px;
        color: #333;
    }
    

    相关文章

      网友评论

          本文标题:css文本溢出

          本文链接:https://www.haomeiwen.com/subject/gwetfftx.html