首页 > 技术文章 > CSS 文字溢出处添加省略号

wuyuxiang 2016-01-28 15:26 原文

兼容火狐、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;
      width: 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-width: 0px) {
      .textoverflow:after {
      content: "";
    }

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


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

推荐阅读