zoukankan      html  css  js  c++  java
  • 使用css控制文字显示几行并且剩余部分隐藏(移动端和PC端同样适用)

    前言

    有些需求需要我们控制一段文本最多显示几行,就像逛淘宝京东的评价楼层一样,有时可能还需要隐藏剩余部分,这样的需求我们怎么来解决呢?

    解决办法

    我们完全可以使用css来解决这一需求

    1. 解决文本显示行数

    word{
         display:-webkit-box  // 使其变为伸缩盒
         -webkit-line-clamp:2 // 设置其要显示的行数
         -webkit-box-orient:vertical // 规定子元素的排列方式
    }

    2. 隐藏剩余部分

    word{
         display:-webkit-box  // 使其变为伸缩盒
         -webkit-line-clamp:2 // 设置其要显示的行数
         -webkit-box-orient:vertical // 规定子元素的排列方式
         100%;
         overflow:hidden;
         text-overflow:ellipsis;
    }

    注意:当我们设置了display:-webkit-box,那么-webkit-line-clamp和-webkit-box-orient:vertical属性是必须的!!!

    更新于2019-10-11

    其中-webkit-line-clamp就是控制行数的,是3就是显示3行,3行结束点点点,如果是2则最多2行。

    进一步了解box-orient属性

  • 相关阅读:
    大富翁8分析
    DCOM实现分布式应用(三)
    DCOM实现分布式应用(一)
    [转]职业生涯中的10个致命错误
    VC中展开宏
    zoj 2853 Evolution
    poj 1088 滑雪
    hdu 2437 Jerboas
    poj 3070 Fibonacci
    zoj 2976 Light Bulbs
  • 原文地址:https://www.cnblogs.com/kunmomo/p/10098465.html
Copyright © 2011-2022 走看看