CODEWITHSUNDEEP
javascripthtmlcss
Andrus
Andrus

Reputation: 27919

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


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

Upvotes: 3

Views: 5316

Answers (4)

Phil
Phil

Reputation: 585

CSS is enough, no need for JS.

Relative positioned wrapper and absolute positioned read-more-link with opaque background.

Bonus: Display the clamped text by clicking on the link.

.description-wrapper {
    position: relative;
}

.description {
    -webkit-line-clamp: initial;
}

.trimmed-description-wrapper .description {
    display: -webkit-box;
    text-overflow: fade;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

.trimmed-description-wrapper .read-more-link {
    display: initial;
}

.read-more-link {
    display: none;
    position: absolute;
    right: 0;
    bottom: 0;
    color: coral;
    cursor: pointer;
    background: #ffffff;
}

.read-more-link span {
    text-decoration: underline;
}

.read-more-link::before {
    content: "...";
    color: #484848;
    background: #ffffff;
    padding: 0 8px 0 0;
}
<p class="description-wrapper trimmed-description-wrapper">
    <span class="description">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam officiis quos totam. Cupiditate, dicta facere? Ab amet aspernatur atque beatae commodi deleniti dolores ea earum eos error maxime minus nemo neque nihil non, nostrum odio officiis optio perferendis reprehenderit saepe suscipit vero vitae? Cumque delectus distinctio dolore, dolorem ducimus facere laudantium neque nisi officiis! Ad consectetur rerum saepe voluptatibus? Cum dicta facere hic libero perspiciatis quae, quaerat quo quos reprehenderit sed totam vel. Consequuntur ea odit pariatur! Ab accusantium consequuntur, ea et exercitationem, illum, inventore molestias obcaecati officia optio praesentium quibusdam similique vel? Accusantium doloribus fuga ipsam neque, porro similique?
    </span>
    <span class="a read-more-link" onclick="this.parentNode.classList.remove('trimmed-description-wrapper');"><span>read more</span></span>
</p>

Upvotes: 0

David Thomas
David Thomas

Reputation: 253308

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:

Upvotes: 3

Jashwant
Jashwant

Reputation: 28995

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)

Upvotes: 1

Revent
Revent

Reputation: 2109

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

Upvotes: 0

Related Questions