zoukankan      html  css  js  c++  java
  • CSS-文本溢出

    1.控制文字在一排显示,超过部分省略打点显示(单行溢出)

    <p>申达股份框架上啥减肥吧技术开发健身房空间卡酸辣粉是否哈市将开发手机壳发哈萨克肌肤啊手机壳发哈萨克肌肤按时缴费卡上健身房看了哈是否尽快立法</p>

    p{

       overflow:hidden;

       text-overflow: ellipsis;

       white-space: nowrap;

    }

    2.控制文在最多占2行,多余的部分省略打点显示(多行溢出)

    p{

          overflow: hidden;

          display: -webkit-box;

          -webkit-box-orient: vertical;

          -webkit-line-clamp: 2;      //数字代表最多显示的行数

    }

    分析:

             在webkit浏览器或移动端(绝大部分是webkit内核的浏览器)的页面实现比较简单,可以直接使用webkit的css扩展属性(webkit是私有属性)-webkit-line-clamp;

            -webkit-line-clamp是一个不规范的属性,他没有出现在css规范草案中。

            -webkit-line-clamp用来限制在一个块元素显示的文本的行数。为了实现该效果需要结合属性:

                         display:-webkit-box; 必须结合的属性,将对象作为弹性伸缩盒子模型显示。

                         -webkit-box-orient; 必须结合的属性,设置或检索伸缩盒对象的子元素的排列方式。

                        text-overflow:ellipsis; 可以用来多行文本的情况下,用省略号“…”隐藏超出范围的文本 。

  • 相关阅读:
    Catalan数,括号序列和栈
    NOIP2017 心路历程
    [Code Festival 2017 qual A] C: Palindromic Matrix
    HIVE 数据类型
    HADOOP-HIVE学习笔记(3)- Beeline
    HADOOP-HIVE学习笔记(2) CLI
    中信证券 指标公式 笔记
    【转】Python将列表数据写入文件(txt, csv,excel)
    Python中创建二维数组
    DevExpress 控件汉化方法
  • 原文地址:https://www.cnblogs.com/liuqingxia/p/7724768.html
Copyright © 2011-2022 走看看