Generating ellipsis AND "Read more" link with CSS

Question

[Update] It's different from this question because it's not only asking for text truncation; as i mentioned, i already have text truncation using this approach. Rather it's asking about having "read more" link only when text is truncated (using CSS only if possible).

Currently i'm using this approach to generate ellipsis when text overflows (when it cannot fit into one line). However, now i also want to include a 'Read More' link at the end of the line when overflow occurs and clicking that link will display all the content over multiple lines. Is this doable with CSS only?

btw, i saw this post, which displays "more" link no matter text has overflown or not, which is not what i want.

I guess the last resort would be using javascript with a resize() listener that dynamically hides the overflown portion of the text and creates the link to show them.

Thanks!

There is no way that I know of detecting overflow using CSS. This question seems to corroborate that: http://stackoverflow.com/questions/18844192/css-only-detection-of-text-overflows-in-html. If you are looking for a JS solution, look at this question: http://stackoverflow.com/questions/7738117/html-text-overflow-ellipsis-detection — Marcelo, Feb 08 '16 at 15:59

score 1 · Answer 1 · answered Feb 08 '16 at 16:27

That's not doable with only CSS.

Here's my rather hacky solution: in JavaScript, remove the .truncate class to get at the un-truncated width, then generate a read more link if the width of the text would cause it to be truncated.

var truncated = document.getElementsByClassName("truncate");

for (var i = 0; i < truncated.length; i++) {
    var t = truncated[i];

    // Remove the truncate class to get at the un-truncated width
    t.classList.remove("truncate");
    t.style.display = "inline-block";
    // w = un-truncated width
    var w = t.clientWidth;
    // Restore styling
    t.style.display = "";
    t.classList.add("truncate");

    // 250 corresponds to the width in the CSS
    if (w >= 250) {
        // Generate read more link
        var readMore = document.createElement("a");
        readMore.href = "#";
        readMore.innerText = "Read More";
        t.parentNode.insertBefore(readMore, t.nextSibling);
    }
}

.truncate {
    width: 250px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

<div class="truncate">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui iusto quos praesentium et cupiditate nostrum, suscipit voluptates sint eos amet vel quisquam, consequuntur hic necessitatibus, quibusdam ex repellat error odio.</div>
<hr>
<div class="truncate">Hello</div>

This is the answer I like the most, but there is no need to remove the class just to know the width. You can just check if `t.offsetWidth` is smaller than `t.scrollWidth`, and if it is that means the text has overflown, so we can add the button in that case. It was mentioned in the comments: https://stackoverflow.com/questions/7738117/html-text-overflow-ellipsis-detection — David G., Aug 08 '22 at 13:57

score 0 · Answer 2 · answered Feb 08 '16 at 16:48

You will need JS for this. You can do something like this in jQuery:

var str = "this is some truncated te..."; //Your string to eval
var n = str.search("..."); //look for the elepsis 
if (n ==="" || n === null){ //if the elepsis is not found in the string
   $(".foo").hide(); //hide your read more link
}else{
   $(".foo").show(); //show your read more link
}

Note: this answers the second part of your question - the first part was answered by another poster.

score -1 · Answer 3 · answered Feb 08 '16 at 15:59

If you're using a CSS class to truncate the text, why not use the same class to hide or show the link?

a.read-more {
display: none;
}

.truncate a.read-more {
display: block;
}

If the class is set on all your items regardless of content, you will need to do it with JavaScript, as described in Marcello's comment.

Generating ellipsis AND "Read more" link with CSS

3 Answers3

Linked

Related