zoukankan      html  css  js  c++  java
  • CSS 文字溢出处添加省略号

    兼容火狐、Opera、chrome的文字溢出添加省略号的功能,好像以前分享过几款代码了,

    但是之前的没考虑过各个浏览器的兼容性问题,现在这款对各大浏览器的兼容都表现不错,

    当文字或字符超出外层Div的时候,自动隐藏并添加省略号,对前端开发来说,这是个相当不错的CSS特效吧。


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
      <title>文字溢出添加省略号</title>
      <style type="text/css">
      .textoverflow a {
          display: block;
           120px;
          margin: 0px 0px 0px 3px;
          white-space: nowrap;
          overflow: hidden;
          float: left;
          -o-text-overflow: ellipsis; /* for Opera */
          text-overflow: ellipsis; /* for IE */
        }

      .textoverflow:after {

          content: "…";
        }

      /* for Firefox */

      @media all and (min- 0px) {
          .textoverflow:after {
          content: "";
        }

      /* for Opera */
        }
      </style>
    </head>


      <body>
        <div class="textoverflow">
        <a>绿油油的大白猪,在湛蓝的草坪上吃草</a>
        </div>
      </body>
    </html>

  • 相关阅读:
    在CSS里加下面任何一行代码都可以解决图片之间的间隙
    MasterPage Toolbar
    图解虚拟机VMware服务自动启动
    WSUS完全部署
    DIV全屏覆盖网页
    大型架构.net平台篇(WEB层均衡负载nginx)
    组策略设置及导出导入方法[附上设置好的组策略]
    如何設定定時關機?
    gridview获取当前行索引的方法
    no suject
  • 原文地址:https://www.cnblogs.com/wuyuxiang/p/5166453.html
Copyright © 2011-2022 走看看