美文网首页
css控制单行或者多行文本超出显示省略号(...)

css控制单行或者多行文本超出显示省略号(...)

作者: Sun____ | 来源:发表于2019-10-08 09:32 被阅读0次

    html:

    单行
    <div class="box aa"> 
      Query是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。 
    </div>
    <br>
    <br>
    
    多行方法1
    <div class="box bb"> 
      Query是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。Query是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。Query是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。
     </div>
    
    <br>
    <br>
    
    
    多行方法2
    <div class="ellips">
      <div class="dot">...</div>div relative定位定高定宽,内部放个个浮动层浮动在右下角字
    </div>
    

    css:

    .box {
        width:300px;
        height:20px;
        padding:10px;
        border:1px solid #424242;
        line-height:24px
    }
    .aa {
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
    }
    .bb {
        height:65px;
        overflow:hidden;
        display:-webkit-box;
        -webkit-box-orient:vertical;
        -webkit-line-clamp:3;
        overflow:hidden;
    }
    .ellips {
        position:relative;
        width:100px;
        height:60px;
        line-height:20px;
        overflow:hidden;
        background:#fff
    }
    .ellips .dot {
        position:absolute;
        right:0px;
        bottom:0px;
        height:20px;
        background:#fff
    }
    

    相关文章

      网友评论

          本文标题:css控制单行或者多行文本超出显示省略号(...)

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