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; /* 測試一行顯示多塊 */
    }