• 注册
  • 笔记小抄 笔记小抄 关注:1 内容:21

    CSS标题多余部分使用省略号代替实现方法

  • 查看作者
  • 打赏作者
    • 笔记小抄
    • 大版主
      Lv. 44
      VIP
      小可爱

          我们在项目开发中,经常会遇到,需要将列表标题多余部分用省略号代替,很多初学者都不知道该如何弄,今天就写一种简单的,使用css来控制。

          对于将标题(不一定是标题,只要是需要截取的都可以)多余部分用省略号代替,除了使用css来控制,还可以使用后台程序来控制,这个在以后在写。

         使用css控制之后是这样的:

      CSS标题多余部分使用省略号代替实现方法

      html示例:

      <li >
      <a title="国务院办公厅关于深入推行科技特派员制度的若干意见 2016/06/02" href="" target="_blank">
      国务院办公厅关于深入推行科技特派员制度的若干意见</a><span class="first">16/06/02</span>
      </li>

      使用CSS样式对于其中的a标记控制, 使用到的css样式是(其他样式未列出):

      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      width: 238px;

      其中宽度是可变的,而且根据实际需求改变宽度值。

      请登录之后再进行评论

      登录

      WordPress后台-外观-小工具 进行配置小工具

    • 做任务