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; 可以用来多行文本的情况下,用省略号“…”隐藏超出范围的文本 。

  • 相关阅读:
    SpringMVC是什么?
    SpringMVC工作原理
    SQL给字段加上统一的某个字符
    把数据库里的标签去掉
    Windows通过DOS命令进入MYSQL的方法
    mysql添加字段
    sqlserver查询最接近的记录
    LIST 排序
    Tsk4.5异步
    认识和使用Task
  • 原文地址:https://www.cnblogs.com/liuqingxia/p/7724768.html
Copyright © 2011-2022 走看看