how to add “… read more” anchor to end of text if it does not fit

问题

I'm looking for a way to add "... read more" hyperlink to end of visible part of multi-line text if its height exceeds 8em.

I tried code below but ... read more does not appear and only half of last line height is visible. How to make it to appear and allow user to click in it ?

something like:

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

jquery and ASP.NET MVC2 are used.

.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>

回答1:

You will need jQuery / (server side language) for this. It cant be done with pure css.

dotdotdot is very nice jquery plugin for the same purpose. (Scroll bottom for Read more example)

回答2:

This feels somewhat clunky, and requires some manipulation of the DOM, but I'd suggest:

$('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().

回答3:

Here is a PHP function I wrote to do this, not sure what language you want to use:

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

来源：https://stackoverflow.com/questions/15722321/how-to-add-read-more-anchor-to-end-of-text-if-it-does-not-fit

标签

jquery

html

css

overflow