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

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; /* 测试一行显示多块 */
    }