zoukankan      html  css  js  c++  java
  • 多行文本,超出部分省略号显示

        <style>
            p {
                font-size: 36px;
                height: 96px;
                overflow: hidden;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                word-break: break-all;
                -webkit-box-orient: vertical;
            }
        </style>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate hic odit nisi quo excepturi laudantium? Delectus reiciendis unde atque, voluptate commodi saepe animi, ex repudiandae, recusandae dolor dolorem cum quisquam.</p>

    效果图:

    属性说明:

    -webkit-line-clamp 一个不规范的属性,它没有出现在 CSS 规范草案中。限制在一个块元素显示的文本的行数。

              为了实现该效果,它需要组合其他外来的WebKit属性。

    常见结合属性:

    display: -webkit-box  将对象作为弹性伸缩盒子模型显示 。

    -webkit-box-orient    设置或检索伸缩盒对象的子元素的排列方式 。

  • 相关阅读:
    第二次冲刺(二)
    第二次冲刺(一)
    5月30日学习日志
    5月29日学习日志
    5月28日学习日志
    5月27日学习日志
    5月26日学习日志
    粒子群算法-PSO
    花授粉优化算法-python/matlab
    花授粉优化算法
  • 原文地址:https://www.cnblogs.com/zy20160429/p/7844135.html
Copyright © 2011-2022 走看看