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

    单行文本省略
    white-space:nowrap;/*强制文本在一行内显示*/
    overflow:hidden; /*溢出内容为隐藏*/
    text-overflow:clip;/*不显示省略标记(...),而是简单的裁切。*/
    text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...)。*/
    /*Firefox对text-overflow:ellipsis 这一属性支持不是很好。*/
    多行文本省略
    因为移动端浏览器绝大部分用的是webkit内核,所以可以用-webkit-line-clamp属性。
    -webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果,它需要组合其他的WebKit属性。
    display: -webkit-box; 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。
    -webkit-box-orient 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式 。
    span{
    /*注意高度和宽度,不允许出现汉字截断*/
     overflow : hidden;
        text-overflow: ellipsis; /* text-overflow : clip;*/
        display: -webkit-box;
        -webkit-line-clamp: 2;/*此为两行,设置行数*/
        -webkit-box-orient: vertical;/*子元素垂直排列*/
    }
     
    一步一叩首,今天的自己比昨天好一点就行,明天的自己需追寻
  • 相关阅读:
    idea中maven自动导入出现问题
    DDIA
    DDIA
    DDIA
    DDIA
    DDIA
    DDIA
    DDIA
    MIT 6.824 第五次作业Primary-Backup Replication
    MIT 6.824 第四次作业GFS
  • 原文地址:https://www.cnblogs.com/lingXie/p/6796080.html
Copyright © 2011-2022 走看看