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

  • 相关阅读:
    cf605 div3
    how to find Longest Increasing Subsequence Size
    luogu1641 [SDOI2010]生成字符串
    luogu1441 砝码称重
    luogu4218 [JSOI2008] 最小生成树计数
    luogu1514 引水入城
    luogu1312 Mayan游戏 剪枝
    luogu1081 开车旅行 树上倍增
    luogu1052 过河
    luogu1026 统计单词个数
  • 原文地址:https://www.cnblogs.com/strawberry-1/p/12054285.html
Copyright © 2011-2022 走看看