首页 > Web开发 > 详细

CSS截取截取字符长度并显示省略号的方法

时间:2016-04-25 14:32:35      阅读:342      评论:0      收藏:0      [点我收藏+]

HTML部分

    <div>
      <span>这是一个CSS3截取截取字符的例子。它根据宽度来处理。</span>
    </div>
    <div class="ut">
      <span>无用占位</span>
      <a href="#" title="这是一个CSS3截取截取字符的例子。它根据宽度来处理。">这是一个CSS3截取截取字符的例子。它根据宽度来处理。</a>
    </div>
    <font color="red">注:本写法非本人发明,这样仅介绍了原理。其中当出现多个块显示在一行时截取功能的块只能放最后,由于设置浮动宽度将失效</font>  

CSS部分

   a {
      display: block; /* 当前元素本身是inline的,因此需要设置成block模式 */
      white-space: nowrap; /* 因为设置了block,所以需要设置nowrap来确保不换行 */
      overflow: hidden; /* 超出隐藏结合width使用截取采用效果*/
      text-overflow: ellipsis; /* 本功能的主要功臣,超出部分的剪裁方式 */
      -o-text-overflow: ellipsis; /* 特定浏览器前缀 */
      text-decoration: none; /* 无用 */
    }
    .ut {
      width: 200px; /* 测试长度 */
    }
    .ut span {
      float: left; /* 测试一行显示多块 */
    }

 

CSS截取截取字符长度并显示省略号的方法

原文:http://www.cnblogs.com/wangdahai/p/5430703.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!