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>

  • 相关阅读:
    css3--简单的加载动画
    background--详解(背景图片根据屏幕的自适应)
    css--两行显示省略号兼容火狐浏览器
    tortoisegit--无法commit
    vim--学习
    JavaScript--数据结构与算法之图
    JSONP
    数据结构--只用位运算实现加减乘除操作
    剑指offer——不用加减乘除做加法
    shop--10.前端展示系统--首页展示(后台)
  • 原文地址:https://www.cnblogs.com/wuyuxiang/p/5166453.html
Copyright © 2011-2022 走看看