zoukankan      html  css  js  c++  java
  • 使用css3设置隐藏文字为省略号

      首先,实现这种效果需要css两个属性,分别是text-overflow和white-space.

      1.text-overflow有两个值,clip:表示剪切文本;ellipsis:表示用省略号代替修改的文字.

      2.white-space这里只说明两个常用的值,normal:表示自动换行;nowrap:表示文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止。

      举实例说明:

    <!DOCTYPE html>
    <html>
    <head> 
    <meta charset="utf-8">
    <title>text-overflow</title>
    <style type="text/css">
    .test_demo{
        
        overflow:hidden; 
        white-space:nowrap;
        text-overflow:ellipsis;
        width:200px; 
        background:#ccc;
    }
    </style>
    </head> 
    <body>
    <div class="test_demo">
      啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊(我是省略号)
    </div>
    </body>
    </html>

      这里特别要说明,不仅要text-overflow:ellipsis,还须定义强制文本在一行内显示(white-space:nowrap)及溢出内容为隐藏(overflow:hidden),三个属性同时使用,只有这样才能实现溢出文本显示省略号的效果.

    效果图如下:

  • 相关阅读:
    HDU
    稀疏表(ST / Sparse Table)
    HDU
    HDU
    树状数组
    用 BitArray 来编写埃拉托斯特尼筛法
    BitArray 内置是逆序存储, 因此要自行实现正序输出
    位运算,位移,窗体
    按位运算,窗体程序,And,Or,Xor
    基数排序
  • 原文地址:https://www.cnblogs.com/peiyuanming/p/4720293.html
Copyright © 2011-2022 走看看