zoukankan      html  css  js  c++  java
  • css多行文本省略号问题

    已知,单行文本溢出内容用省略号代替,css代码如下:

    text-overflow: ellipsis;    溢出部分用...代替
    white-space: nowrap;     //强制在一行显示   
    overflow: hidden;//溢出隐藏
    

     今天刚好遇到关于多行文本溢出,超出部分用...代替的问题,查找了一些资料。原文参考页面底部的链接

    1:WebKit浏览器或移动端的页面

    需要使用webkit私有属性,css草案中没有,因此不是标准的css属性。css代码如下

    display: -webkit-box; //作为弹性盒子模型显示
    -webkit-box-orient: vertical;    //设置子元素的排列方式
    -webkit-line-clamp:2;    //块元素显示文本行数
    over-flow:hidden;
    text-overflow: ellipsis;
    

    2: 用包含...的元素模拟

    p {
        position:relative;
        line-height:1.4em;
        /* 3 times the line-height to show 3 lines */
        height:4.2em;
        overflow:hidden;
    }
    p:after {
        content:"...";
        font-weight:bold;
        position:absolute;
        bottom:0;
        right:0;
        padding:0 20px 1px 45px;
        background:url(http://css88.b0.upaiyun.com/css88/2014/09/ellipsis_bg.png) repeat-y;
    }
    

      需要注意的是:1:设置hight是line-hight的整数倍,以免文本在盒子下方溢出时,露出部分残字:

    2:伪类:after设置为position:absolute定位,目的是让插入的背景图片覆盖在文本框右下角,模拟溢出假象。可以直接设置background-color替换该背景图。

    3:IE6/7不能读content内容,可用span标签<span>...</span>模拟;

    还有两款小插件:

    jQuery插件-jQuery.dotdotdot与Clamp.js没有使用

    原文参考http://www.111cn.net/cssdiv/css/67208.htm

  • 相关阅读:
    Java基础知识回顾
    设计模式简单回顾
    数据结构基础知识
    《More Effective C#》读书笔记
    《Effective C#》读书笔记
    《编程匠艺》读书笔记
    《Scrum实战》读书会作业01
    开始一段新的敏捷学习之旅 —— IT帮读书会第4期《Scrum实战》
    【译】别学框架,学架构
    AngularJS学习笔记(1)
  • 原文地址:https://www.cnblogs.com/wbengineer/p/4625715.html
Copyright © 2011-2022 走看看