javascript – CSS文本省略号,包括“更多”链接

前端之家收集整理的这篇文章主要介绍了javascript – CSS文本省略号,包括“更多”链接前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
所以我有以下小提琴,它将文本中的省略号设置为两行.然后我想要一个与文本内联的“更多”链接.

http://jsfiddle.net/csYjC/2876/@H_403_3@

因此,如果我们的文本有两行以上,它应该如下所示:@H_403_3@

那是对的.然而:@H_403_3@

这是不正确的(应该与文本内联).@H_403_3@

代码如下:@H_403_3@

<div class="text">
  <div>Lorem ipsum dolor sit amet,Lorem Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem Lorem i</div>
  <a href="#">More</a>
</div>

和css:@H_403_3@

.text{
   display: inline;
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-Box;
   line-height: 24px;     /* fallback */
   max-height: 48px;      /* fallback */
   -webkit-line-clamp: 2; /* number of lines to show */
   -webkit-Box-orient: vertical;
}

.text a {
    position: absolute;
}

我想一定很容易……提前谢谢你.@H_403_3@

解决方法

.text中的div仍然显示为块元素.用它来修复:
.text > div { display: inline; }

http://jsfiddle.net/csYjC/2880/@H_403_3@

猜你在找的JavaScript相关文章