zoukankan      html  css  js  c++  java
  • 多行文本溢出 方法

      参照网址:http://c7sky.com/text-overflow-ellipsis-on-multiline-text.html

    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>无标题文档</title>
    <style type="text/css">
    .figcaption {
        background: #EEE;
         410px;
        height: 3em;
        margin: 1em;
    }
    .figcaption p {
        margin: 0;
        line-height: 1.5em;
        
    }
    </style>
    </head>
    
    <body>
        <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>
    </body>
    <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
    <script type="text/javascript">
        $(function(){
            $(".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)(...)?$/, "..."));
                };
            });
    
        })
    </script>
    </html>
  • 相关阅读:
    魅族Java面经
    笔试常考的Java基础
    笔试常考的Linux命令大全
    Spring概念
    Java三大框架的配置
    Myeclipse的使用
    项目经验
    Android四大组件及activity的四大启动模式
    java基础
    IT在线笔试总结(二)
  • 原文地址:https://www.cnblogs.com/jinsuo/p/6294057.html
Copyright © 2011-2022 走看看