在a标签中其他内容(span s i em)时怎样让a标签的内容占整个标签长度的一半？

Question

我的a标签中包含两个s，一个span，怎样让a标签的内容长度只有我标的那么长，内容长度不会到
末尾的span和s哪去呢？

Answer 1

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

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;
}
/*...*/

Answer 2

如果要做这种效果，我决定比较合理的 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%宽度即可。