zoukankan      html  css  js  c++  java
  • css3文本多行省略

    <!DOCTYPE html>
    <html>
    <head>
    <title>多行换行</title>
    <style type="text/css">
    div{

    /*overflow溢出元素框,发生什么
    hidden内容剪裁,余下内容不可见
    scroll 内容剪裁,显示滚动条
    visible默认值 不会剪裁,显示在元素框外 */

    overflow: hidden;
    /*如果要做到多行换行 需要使用一个webkit内核专用的属性-webkit-line-clamp来设置行数
    用其设置行数的时候还要使用-webkit-box-orient来设置行的方向
    同样也要使用display:-webkit-box来把这个元素设置成webkit类型的盒子模型*/
    /*如果在做多行换行的时候建议不要设定死的高,如果设置了那么设置的高就要设置成能完整显示文本的高度
    建议是不设定高度*/
    height: 53px;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    }
    </style>
    </head>
    <body>
    <div>welcom to qingyun welcom to qingyun welcom to qingyun welcom to qingyun welcom to qingyun welcom to qingyun welcom to qingyun welcom to qingyun welcom to qingyun welcom to qingyun welcom to qingyun</div>
    </body>
    </html>

  • 相关阅读:
    滚动加载图片
    轮播图
    各种插件
    IE兼容
    文字换行
    CSS3 transform用法
    隐藏手机号中间几位数
    js实现收藏,首页等功能
    loading练习
    animation练习
  • 原文地址:https://www.cnblogs.com/adialike/p/6383759.html
Copyright © 2011-2022 走看看