zoukankan      html  css  js  c++  java
  • 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; /* 测试一行显示多块 */
        }
  • 相关阅读:
    对进程空间的认识
    自己实现智能指针
    实现一个string类
    常见问题总结
    pong game using ncurses
    知识梳理
    经典算法回顾
    自己实现more命令
    表的垂直拆分和水平拆分-zz
    MySQL索引原理及慢查询优化-zz
  • 原文地址:https://www.cnblogs.com/wangdahai/p/5430703.html
Copyright © 2011-2022 走看看