zoukankan      html  css  js  c++  java
  • 文本溢出显示省略号如何实现?

    (1)单行文本溢出显示省略号

    P{
      200px; /*限定盒子的宽度*/
      overflow:hidden;   /*给元素设置溢出隐藏属性*/
      text-overflow:ellipsis; /*文本溢出显示省略号*/
      white-space:nowrap; /*文本不换行*/
    }

    (2)多行文本溢出显示省略号

    方法1:利用WebKit的CSS扩展属性(只有-webkit内核才有作用)

    P{
    200px; /*限定盒子的宽度*/
    overflow: hidden; /*给元素设置溢出隐藏属性*/
      text-overflow: ellipsis; /*文本溢出显示省略号*/
      display: -webkit-box; /*将对象作为弹性伸缩盒子模型显示*/
      -webkit-line-clamp: 2;/*用来限制在一个块元素显示的文本的行数,这是一个不规范的属性,它没有出现在 CSS 规范草案中。*/
      -webkit-box-orient: vertical;/*设置或检索伸缩盒对象的子元素的排列方式*/
    }

    方法2:利用伪元素模拟溢出显示省略号的效果(兼容性比较好)

    实现要点:

    将height设置为line-height的整数倍,防止超出的文字露出。

    给 .p1:after 添加渐变背景可避免文字只显示一半。

     

  • 相关阅读:
    Bridage
    国内项目测试培训笔录和小结
    Proxy
    数据库设计
    PDF转Word
    机务维修成本技术点
    MyEclipse10
    MyEclips:Struts 2 + Hibernate 4 + SQL Server2008
    观察者模式
    javascript事件设计模式
  • 原文地址:https://www.cnblogs.com/-candy/p/14213072.html
Copyright © 2011-2022 走看看