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


    原文链接: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)(...)?$/, "..."));
        };
    });
  • 相关阅读:
    获取自己的网络出口IP地址
    go语言开发IDE
    国内可用的python源
    Tomcat 配置及优化
    大小不固定的图片和多行文字的垂直水平居中
    行内元素与块级元素比较全面的区别和转换
    常用的四种CSS样式表格
    JS鼠标事件大全
    Javascript 5种方法实现过滤删除前后所有空格
    JavaScript trim 实现(去除字符串首尾指定字符)
  • 原文地址:https://www.cnblogs.com/yuanxinru321/p/7543086.html
Copyright © 2020-2023  润新知