Jquery 如何添加“…”；。。。阅读更多“；如果文本不适合，则锚定到文本的结尾

我正在寻找一种方法来添加“…阅读更多”超链接到多行文字可见部分的结尾，如果其高度超过8em

我尝试了下面的代码，但是

。。。阅读更多信息

不会显示，并且只显示最后一行高度的一半。如何使其显示并允许用户在其中单击

比如：

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>

。说明
{
最大高度：8em；
溢出：隐藏；
字体大小：小；
文本溢出：“”；
}
dsdsa Sakldka asld slkskldkdlks ewkesddjkdj skskssk skssk sksksksks sksksks sksksks sksksks skdskdj askdasj askdaskdasjd askdaskdaskdaskla dasl asldaksd lad askda askla askdal adskaskd lad lad askda askda askda askdaskla askdaskdaskda askdaskda askda askda askda askda askda askda askda askda askda askda askda askda askda askdaskda askda askda as
kassaksk skdksk skdksk skdksk skdksk skdksk skdksk skdksk skdksk askdasj askdasjd asldksa lasd askla asl asldaksd lad askda adkal adkal adkal sdk adkal adkal adkal askd ask asldkad aas dasdk asldkalsdk asldkal
sad kassaksk skdksk skdksk skdksk skdksk skdksk askdasj askdasj askdasjd asldksa lasd askla asl asldaksd lad askdal adskaskd lad askda askaldka alsdkasdk ff adkalsdk fffadsdkasl adklasdl kaldkasdl asdasdk aas dasdk asldkalsdk asldkalsdk asldsakdl
FDDFKASSAK skdfdfksk skdskdj askdasj askdasjd asldksa lasd askla dasl asldaksd lad askdal adskaskd lad askaldka alsdkasdk adkasdk adkasdk asl adklasdl kaldkasdk aas dasdk asldkasdk asldkasdk asldkasdk

这是我编写的一个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;
}
?>

为此，您需要jQuery/（服务器端语言）。这不能用纯css来完成

---

是非常好的jquery插件，用于相同的目的。（滚动底部查看

阅读更多

示例）

这感觉有点笨重，需要对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';
    });
});

$（'p'）。每个（函数（即，e）{
var，该值=$（此值）；
.contents（）.wrapAll（“”）；
var span=that.find（'span.pWrap'），
sHeight=跨度高度（）；
那就是数据({
“全高”：酋长，
“minHeight”：that.height（）
});
如果（该.height（）
参考资料：












看起来您正在查找
文本溢出：省略号；
，但具有切换效果的可单击“阅读更多”链接可能需要javascript。尝试了
文本溢出：省略号
，但不起作用。尝试了
文本溢出：“
但没有显示任何内容。Visual Studio写道，文本溢出是未知的属性名称。它可能仅适用于单行文本。也许您应该尝试类似的方法？？？谢谢。这是单行文本。如何为多行文本实现此功能？谢谢。您是如何解决特定浏览器和特定屏幕尺寸上的问题的只有最后一行高度的一部分是可见的？如何实现垂直换行以使最后一行始终完全可见？我比您更了解。我尝试了`$（函数（）{$（'.description'）.dotdot（{after:'a.more'，height:880}）；`and
即使全文可见，它也会添加
阅读更多内容
（本例中不添加省略号）。如何仅在有更多文本时添加阅读更多内容？