zoukankan      html  css  js  c++  java
  • css文本超出省略号

    终于完成了项目了,今天我就分享自己在项目中比较实用的一些功能的实现,第一个就是纯css文本超出省略号

    /* 文本单行超出省略号 */
    .textels {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box; //将元素设为盒子伸缩模型显示
    -webkit-box-orient: vertical; //伸缩方向设为垂直方向
    -webkit-line-clamp: 1; //超出3行隐藏,并显示省略号
    }

    /* 文本2行超出省略号 */
    .textels-2 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box; //将元素设为盒子伸缩模型显示
    -webkit-box-orient: vertical; //伸缩方向设为垂直方向
    -webkit-line-clamp: 2; //超出3行隐藏,并显示省略号
    }

    /* 文本3行超出省略号 */
    .textels-3 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box; //将元素设为盒子伸缩模型显示
    -webkit-box-orient: vertical; //伸缩方向设为垂直方向
    -webkit-line-clamp: 3; //超出3行隐藏,并显示省略号
    }
    想显示多少行超出的用省略号表示就更改-webkit-line-clamp为几。
    已经用了n次了,肯定可以的,所以就不上图了哈!
  • 相关阅读:
    放大镜
    简单拖拽加边界处理加轨迹返回
    事件委托
    数组的方法
    数据处理
    数组去重
    字符串的操作方法
    函数的递归调用
    选择排序、冒泡排序
    Linux—shell中$(( ))、$( )、``与${ }的区别
  • 原文地址:https://www.cnblogs.com/mei1234/p/8963132.html
Copyright © 2011-2022 走看看