Create an ellipse and CSS link with CSS

Question

[Refresh] This is different from this question because it not only requests truncation of the text; as I mentioned, I already have text truncation using this approach . Rather, he asks that the “read more” link only occurs when the text is truncated (using CSS, if possible).

I am currently using this approach to generate ellipsis when overflowing text (when it cannot fit on one line). However, now I also want to include the “Read More” link at the end of the line when an overflow occurs, and clicking this link will display all the content on several lines. Can this only be done with CSS?

btw, I saw this post that displays the "more" link, regardless of whether the text is full or not, which is not what I want.

I assume that the latter tool will use javascript with a listener resize()that dynamically hides the overflowing part of the text and creates a link to display them.

Thanks!

Answer 1

This is not feasible only with CSS.

Here is my pretty hacky solution: in JavaScript, remove the class .truncateto get a shortened width, then generate a read link if the width of the text truncates it.

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>

Run codeHide result

Answer 2

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

: - .

Answer 3

If you use the CSS class to truncate 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 installed on all of your elements regardless of content, you will need to do this using JavaScript, as described in Marcello's comment.