Question

我正在寻找一种方法，如果它的高度超过8em，可以在多行文字的可见部分末尾添加“...阅读更多”超链接。

我尝试了下面的代码，但... read more没有显示，只有最后一行高度的一半可见。如何让它出现并允许用户点击它？

类似的东西：

asd sadas sads asda dfdsf
dfds sdf ... read more

使用了jquery和ASP.NET MVC2。

.description
{
    max-height: 8em;
    overflow: hidden;
    font-size: small;
    text-overflow: "<a href='details'>... read more</a>";
}

<p class='description'>dsdsa sakldlka asld slkskldsdlks ewekesdsdjkdj skskssk skssksk skssksks sksksks sksksjs sksks kassaksk skdksk skdskdj askdasj asdkasjd asldksa lasd askla dasl asldaksd lad askdal adslkaskd lads askaldka alsdkaslda  adkalsdk adsdkasl adklasdl kaldakd aas dasdklasdask asldkaslsdk asldsakdl
kassaksk skdksk skdskdjff askdasj asdkasjd asldksa lasd askla dasl asldaksd lad askdal adslkaskd lads askaldka alsdsdkaslda  adkalsdk adsdkasl adklasdl kaldakd aas dasdklasdask asldkaslsdk asldsakdl
sad kassaksk skdksk skdskdj askdasj asdkasjd asldksa lasd askla dasl asldaksd lad askdal adslkaskd lads askaldka alsdkaslda ff adkalsdk fffadsdkasl adklasdl kaldakd aas dasdklasdask asldkaslsdk asldsakdl
fddfkassaksk skdfdfksk skdskdj askdasj asdkasjd asldksa lasd askla dasl asldaksd lad askdal adslkaskd lads askaldka alsdkaslda  adkalsdk adsdkasl adklasdl kaldakd aas dasdklasdask asldkaslsdk asldsakdl</p>

Answer 1

这感觉有些笨重，需要对DOM进行一些操作，但我建议：

$('p').each(function (i, e) {
    var that = $(this);
    that.contents().wrapAll('<span class="pWrap" />');
    var span = that.find('span.pWrap'),
        sHeight = span.height();
    that.data({
        'fullHeight': sHeight,
            'minHeight': that.height()
    });
    if (that.height() < sHeight) {
        $('<a />', {
            'href': '#',
                'text': 'read more',
                'class': 'readMore'
        }).appendTo(that);
    }
}).on('click', 'a.readMore', function (e) {
    var that = $(this),
        p = $(this).closest('p'),
        fullHeight = p.data('fullHeight') + 40,
        minHeight = p.data('minHeight'),
        toHeight = p.height() == fullHeight ? minHeight : fullHeight;
    p.animate({
        'max-height': toHeight,
            'height': toHeight
    }, 1000);
    that.text(function (i, t) {
        return t == 'read more' ? 'show less' : 'read more';
    });
});

JS Fiddle demo

参考文献：

Answer 2

你需要jQuery /（服务器端语言）。它不能用纯粹的CSS来完成。

dotdotdot是一个非常好的jquery插件，用于同样的目的。（滚动到Read more示例的底部）

Answer 3

这是我写的一个PHP函数，不知道你想用什么语言：

<?php
function read_more($article_text, $limit=50)
{
  $breakpoint = 0;
   if(strlen($article_text) > $limit)
   {
      if( ($breakpoint = strpos($article_text, ".", $limit)) !== false )
      {
         if( $breakpoint < strlen($article_text) - 1 )
         {
            $article_text = substr($article_text, 0, $breakpoint) . '... <span class="read_more">[&nbsp;<a href="'.$article_link.'">Read&nbsp;More</a>&nbsp;]</span>';
         }
      }
   }
   return $article_text;
}
?>

如果不适合，如何在文本末尾添加“... read more”锚点

3 个答案: