zoukankan      html  css  js  c++  java
  • css3控制文本多行溢出后显示省略号

    如图所示,我们在做卡片布局时会遇到商品介绍过多的情况;

    这是文本就会超出,布局会混乱。

    因此需要用css3的属性来控制超出文本显示省略号

    overflow:hidden;  //超出隐藏

    text-overflow:ellipsis ;  //溢出用省略号显示

    white-space:nowrap ; //溢出不换行

    这是单行溢出

    多行溢出呢?

    display:-webkit-box;  //将对象作为弹性伸缩盒子显示

    -webkit-box-orient:vertical;  //从上到下垂直排列子元素(设置伸缩盒子的子元素排列方式)

    -webkit-line-clamp:2; //这个属性不是css的规范属性,需要组合上面两个属性,表示显示的行数。

    最后的css样式如下:

    overflow:hidden; 

    text-overflow:ellipsis;

    display:-webkit-box; 

    -webkit-box-orient:vertical;

    -webkit-line-clamp:3; 

  • 相关阅读:
    ui5 call view or method from another view
    vuejs helloworld
    vuejs v-model
    vuejs v-bind
    vuejs on
    vuejs fatherandson
    vuejs scope
    vuejs keep-alive
    VLAN虚拟局域网
    网线的制作
  • 原文地址:https://www.cnblogs.com/luna666/p/9228689.html
Copyright © 2011-2022 走看看