zoukankan      html  css  js  c++  java

  • div里面的内容超出自身高度时，显示省略号

    1.给DIV设置属性： 200px; text-overflow: ellipsis; overflow: hidden; 当div里面的内容总宽度找过 200PX的时候，超出的部分会以“...”的形式显示。

     

    2.上面那个案例之适用于单行文本的现实，才会有效。但当div里面的内容出现多行的时候则不能达到预期的效果。下面是解决多行的时候显示“...”的方案。

     

    [html] view plain copy
     
    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
    2. <html xmlns="http://www.w3.org/1999/xhtml">  
    3. <head>  
    4.     <title></title>  
    5.     <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>  
    6.     <script type="text/javascript">  
    7.     $(function () {  
    8.         $(".figcaption").each(function (i) {  
    9.             var divH = $(this).height();  
    10.             var $p = $("p", $(this)).eq(0);  
    11.             while ($p.outerHeight() > divH) {  
    12.                 $p.text($p.text().replace(/(s)*([a-zA-Z0-9]+|W)(...)?$/, "..."));  
    13.             };  
    14.         });  
    15.         });  
    16.     </script>  
    17.     <style>  
    18.         .figcaption  
    19.         {  
    20.             background: #EEE;  
    21.              410px;  
    22.             height: 3em;  
    23.             margin: 1em;  
    24.         }  
    25.         .figcaption p  
    26.         {  
    27.             margin: 0;  
    28.             line-height: 1.5em;  
    29.         }  
    30.     </style>  
    31. </head>  
    32. <body>  
    33.     <div class="figcaption">  
    34.         <p>  
    35.             You probably can't do it (currently?) without a fixed-width font like Courier. With  
    36.             a fixed-width font every letter occupies the same horizontal space, so you could  
    37.             probably count the letters and multiply the result with the current font size in  
    38.             ems or exs. Then you would just have to test how many letters fit on one line, and  
    39.             then break it up.</p>  
    40.     </div>  
    41. </body>  
    42. </html>  
  • 相关阅读:
    Vue框架的两种使用方式
    转淘宝前端的一篇文章作备份
    分享两个细致、全面讲解Vue和React源码的链接
    网络慢。。。
    mysql的查询使用explain的讲解
    pv，uv的意义
    vi
    php中经常使用的string函数
    dirname(__FILE__) === __DIR__
    phpstorm开发环境搭建流程
  • 原文地址：https://www.cnblogs.com/wyaocn/p/5830583.html
Copyright © 2011-2022 走看看