如果要做这种效果，我决定比较合理的 DOM 结构应该是：

 <div class="item">
  <s class="play_icon cuicons"></s>
  <a href="#">如何使用更换档位</a>
  <s class="right_icon cuicons"></s>
  <span class="recent_study"></span>
</div>

这样给 a 一个 width:50% 宽度即可。

贴一种方案，不过这样最好只限制显示一行：

 html


 <a href="#" class="item">
  <s class="play_icon cuicons"></s>
  <em>如何使用更换档位</em>
  <span class="item-tail">
    <span class="recent_study"></span>
    <s class="right_icon cuicons"></s>
  </span>
</a>

 css


 .item{
   position:relative;
   padding-right:300px;
   height:24px;
   line-height:24px;
   overflow:hidden;
   text-overflow:ellipsis; /* 可选 */
}
.item-tail{
   position:absolute;
   top:0;
   right:0;
   width:300px;
   height:24px;
   overflow:hidden;
}
/*...*/