css截取标题固定长度

Question

因为文章的标题太长，所以需要想办法截取前面固定如20个字，剩余的用...代替，css样式如下：

.titlecut
  width:360px
  white-space:nowrap
  word-break:keep-all
  overflow:hidden
  text-overflow:ellipsis

那么问题来了，我在截取长度之后还需要连接其他内容，如下图，下一篇文章最后侧的...之后应该出现左边那个向右的图标->：

而实际上无论我的titlecut样式加在哪里，都会先连接->再截...，于是向右的图标 -> 就被截掉了。

<a href="next_post_path" class="titlecut" title="post_title">
        <%= page.next.title %> ->
</a>

请问该如何把右边的图标->在截断标题以后再加上？

Answer 1

可以在 <a> 标签里加一个 <span> ，对这个 <span> 进行限宽

<style>
span {
    display: inline-block;
    width: 50px;
    white-space:nowrap;
    word-break:keep-all;
    overflow:hidden;
    text-overflow:ellipsis;
}
</style>

<a><span>adfdasfasdfadfafadfafasf</span> ></a>