zoukankan      html  css  js  c++  java
  • CSS实现限制显示的字数,超出显示

    [CSS实现限制显示的字数,超出显示"..."]

    一、背景

      在实际项目中,我们常常需要对某些页面的某些特定区域显示指定数量的内容,超出的内容显示"..."来进行美化页面,那么应该怎么做呢?今天就让我们来看看如何达到这一效果。

    二、实现步骤

      CSS代码

    .ov{
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
    }
    

    这样我们就实现了这一效果,但是限制条件是:所要显示的内容只能在一行,不能有换行出现,否则不起作用。

    测试代码

     1 <!DOCTYPE html>
     2 <html>
     3     <head>
     4     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
     5         <title>测试超出显示点点点</title>
     6         <style type="text/css">
     7             .ov{
     8                 white-space:nowrap;
     9                 overflow:hidden;
    10                 text-overflow:ellipsis;
    11                 200px;
    12                 margin:30px auto;
    13             }
    14         </style>
    15     </head>
    16 <body>
    17     <div class="ov">
    18         测试显示点点点测试显示点点点测试显示点点点测试显示点点点测试显示点点点测试显示点点点测试显示点点点测试显示点点点测试显示点点点测试显示点点点测试显示点点点测试显示点点点测试显示点点点测试显示点点点测试显示点点点测试显示点点点
    19     </div>
    20 </body>
    21 </html>
    

    显示效果如下:

    img

  • 相关阅读:
    C++调用web服务(java事例供参考)
    ASP.NET1.1与2.0如何引入MagicAjax (转载自http://hi.baidu.com/zzticzh)
    爱,在世界末日时
    Why Google Chrome is Multiprocess Architecture
    Chrome
    Code Reuse in Google Chrome
    Google V8 JavaScrit 研究(1)
    第一篇文章
    User Experience
    WPF
  • 原文地址:https://www.cnblogs.com/strawberry-1/p/12054285.html
Copyright © 2011-2022 走看看