jquery - 如果不合适，如何在文本末尾添加“...阅读更多”锚

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.

References:

• animate().
• appendTo().
• contents().
• data().
• each().
• find().
• height().
• on().
• text().
• wrapAll().

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;
}
?>