zoukankan      html  css  js  c++  java
  • 文字溢出两行打省略号

    两行--谷歌浏览器下兼容:

    html代码
    <p class="contxt-bulka-01">iPhone 6,iPhone 6S Screen protector tekSonic [iPhone 6 and iPhone 6S iPhone 6S iPhone 6S]</p>
    css代码
    .contxt-bulka-01 {
        display: -webkit-box;
        height: 35px;
        word-break: break-all;
        text-overflow: ellipsis;
        -webkit-text-overflow: ellipsis;
        overflow: hidden;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        font-size: 16px;
    }

    强制一行省略号

    #test{
        text-overflow:ellipsis;
        white-space:nowrap;
        overflow:hidden;
        20px;
    }
    text-overflow主要支持2个值:ellipsis为显示省略号,clip为修剪文本,是默认值。
    white-space:nowrap;的作用是不让元素中的内容折行,在一行显示。
    overflow:hidden;为溢出隐藏,目的是超过元素宽高的部分不再显示。
    20px;设置了元素的宽度,内容超出这个宽度后会显示省略号。
  • 相关阅读:
    jquery ajax
    js 列表选择
    Jquery 搜索框自动提示
    图片居中跟inline-block
    模式学习(一)
    高效图形(一)
    eval() / Function()
    css3(一)
    回调函数(二)
    回调函数(一)
  • 原文地址:https://www.cnblogs.com/mmzuo-798/p/5479057.html
Copyright © 2011-2022 走看看