• 跨浏览器解决多行文本溢出显示省略号


    原文链接:http://jsfiddle.net/Cople/DrML4/5/

    HTML:

    <div class="figcaption"><p>作为微软的游戏平台,Xbox已经出现在了Windows Phone和Windows 8中,就在最近,微软宣布将旗下的Zune消费品牌也一并整合至Xbox品牌下,Xbox Live服务影响力越来越大,渗透面也越来越广。</p></div>
        
    <div class="figcaption"><p>固定一个喜欢的网站可不可以?当然!把每天常去的网站统统固定到开始屏幕中。如何固定?打开 IE10,在网页空白处点击鼠标右键,在应用栏中点击“图钉”图标即可完成固定。</p></div>
        
    <div class="figcaption"><p>先前给大家介绍了很好用的 Colors!今天给大家介绍一款风格不同的画画软件——Fresh Paint,我们可以用它画出油画。</p></div>
        
    <div class="figcaption"><p>You probably can't do it (currently?) without a fixed-width font like Courier. With a fixed-width font every letter occupies the same horizontal space, so you could probably count the letters and multiply the result with the current font size in ems or exs. Then you would just have to test how many letters fit on one line, and then break it up.</p></div>

    CSS:

    .figcaption {
        background: #EEE;
        width: 410px;
        height: 4.5em;/*设置三行显示的话,height需要是line-height的3倍*/
        margin: 1em;
    }
    .figcaption p {
        margin: 0;
        line-height: 1.5em;
    }

    jQuery:

    $(".figcaption").each(function(i){
        var divH = $(this).height();
        var $p = $("p", $(this)).eq(0);
        while ($p.outerHeight() > divH) {
            $p.text($p.text().replace(/(s)*([a-zA-Z0-9]+|W)(...)?$/, "..."));
        };
    });
  • 相关阅读:
    【转】 Android代码混淆之混淆规则
    【转】java虚拟机机制总结
    【转】图解 HTTP协议/IIS 原理及ASP.NET运行机制浅析
    【转】Android 消息机制
    Android-eclipse-NDK&JNI
    【转】大型网站系统架构的演化
    【转】Android开发必知--WebView加载html5实现炫酷引导页面
    【转】Java虚拟机详解----GC算法和种类
    网页中缩略图的意义
    网页开关灯效果
  • 原文地址:https://www.cnblogs.com/yuanxinru321/p/7543086.html
Copyright © 2020-2023  润新知