zoukankan      html  css  js  c++  java
  • 使用Css3新特性,文本超过2行,省略为三个小点

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8" />
        <title>无标题文档</title>
        <style>
          p {
            overflow: hidden;  //隐藏多余行数
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2; //规定显示几行,其余行数用小数点代替
            -webkit-box-orient: vertical;  //规定为垂直方向排列
          }
        </style>
      </head>
    
      <body>
        <p>
          static:对象遵循常规流。top,right,bottom,left等属性不会被应用。
          relative:
          对象遵循常规流,并且参照自身在常规流中的位置通过top,right,bottom,left属性进行偏移时不影响常规流中的任何元素。
          absolute:对象脱离常规流,使用top,right,bottom,left等属性进行绝对定位,盒子的偏移位置不影响常规流中的任何元素,其margin不与其他任何margin折叠。fixed:对象脱离常规流,使用top,right,bottom,left等属性以窗口为参考点进行定位,当出现滚动条时,对象不会随着滚动。center:对象脱离常规流,使用top,right,bottom,left等属性指定盒子的位置或尺寸大小。盒子在其包含容器垂直水平居中。盒子的偏移位置不影响常规流中的任何元素,其margin不与其他任何margin折叠。(CSS3)page:盒子的位置计算参照absolute。盒子在分页媒体或者区域块内,盒子的包含块始终是初始包含块,否则取决于每个absolute模式。(CSS3)
          sticky: 对象在常态时遵循常规流。它就像是 relative 和 fixed
          的合体,当在屏幕中时按常规流排版,当卷动到屏幕外时则表现如fixed。该属性的表现是现实中你见到的吸附效果。(CSS3)*
          CSS3新增属性可能存在描述错误及变更,仅供参考,持续更新
        </p>
      </body>
    </html>    

    来源:https://www.cnblogs.com/uimeigui/p/11984181.html

  • 相关阅读:
    [转]C++中cin、cin.get()、cin.getline()、getline()函数的简单总结
    Assert 的用法
    [转]C/C++作用域详解
    C++ 的getline问题
    字符数组的定义与赋值
    [转] 字符数组的赋值
    [转]标准C++中的string类的用法总结
    [转]memmove、memcpy和memccpy
    关于变长数组的一点小想法-C语言定义数组但是数组长度不确定怎么办
    Java动态代理演变之路
  • 原文地址:https://www.cnblogs.com/PasserByOne/p/12910183.html
Copyright © 2011-2022 走看看