zoukankan      html  css  js  c++  java
  • 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                 width:200px;
    12                 margin:30px auto;
    13             }
    14         </style>
    15     </head>
    16 <body>
    17     <div class="ov">
    18         测试显示点点点测试显示点点点测试显示点点点测试显示点点点测试显示点点点测试显示点点点测试显示点点点测试显示点点点测试显示点点点测试显示点点点测试显示点点点测试显示点点点测试显示点点点测试显示点点点测试显示点点点测试显示点点点
    19     </div>
    20 </body>
    21 </html>

    显示效果如下:

  • 相关阅读:
    第四周JSP作业
    jsp第二次作业
    3.4软件管理与测试作业
    jsp3月3日作业
    课后listview作业
    安卓sql
    activity带数据跳转
    answers
    阿里云ESC无法使用python发送邮件的问题
    Ubuntu 更改时区
  • 原文地址:https://www.cnblogs.com/hafiz/p/5492424.html
Copyright © 2011-2022 走看看