Append three dots to {{content words="42"}} on front page

Developer help
1

On my site I show a list of featured posts on the front page. They show an excerpt (if available) and the first 42 words of the post, before the “read more” button.

I’d like to add three trailing dots directly after the 42 words, but if I do it in the index.hbs file, they show up just over the read more button. Is there a way to achieve this?

2

One way to approach this is via CSS. You’d want to add a class to the excerpt to make it easier to target. Then, you can add this CSS to Code Injection or your theme:

.excerpt-class::after {
   content: "..."
}

CleanShot 2023-01-10 at 10.14.36
CleanShot 2023-01-10 at 10.14.36923×665 65.6 KB

3

Thanks you very much RyanF, this almost works for me. I have added the CSS in the code injection part of the CMS, but simply cannot get the three dots to show up where I want them (like in your screenshot). I have tried various versions of the code below in my index.hbs but best case it shows up just above the “Læs mere” button like before (for some reason I can not upload a photo, but it’s visible on Esbens Hardenbergs blog now).

<span class="excerpt-class">{{content words="32"}}</span>

4

Rather than adding the class to the span element, add it to the <p> tag that’s inside the span. (You probably don’t need the span at all.) That should help put the dots where you need them!

5

That’s the issue, in my index.hbs the code looks like this

{{#foreach posts}}
    <article id="banner">
        <div class="content">
            <header>
                <h1><a href="{{url}}">{{title}}</a></h1>
                {{#if custom_excerpt}}<p>{{custom_excerpt}}</p>{{/if}}
            </header>
            {{content words="32"}}       
            <ul class="actions">
                <li><a href="{{url}}" class="button big">{{t "Learn More"}}</a></li>
            </ul>
        </div>
        {{#if feature_image}}
        <a href="{{url}}" class="image object">
            <img src="{{img_url feature_image}}" alt="{{#if feature_image_alt}}{{feature_image_alt}}{{else}}{{title}}{{/if}}" />
        </a>
        {{/if}}
    </article>
{{/foreach}}

I think the <p> I want to add the class to is somehow inside the {{content words=“32”}} block, could that be the case?

6

Ahh, ok! That setup is different from what I expected.

What if you did this:

.excerpt-class > *:last-child::after {
  content: "...";
}

Because you’re using content, we can’t predict exactly what’s going to come through. This CSS targets the last element in the excerpt container and adds the ...

7

Perfect, that was excactly it - thank you so much again, I would’ve never figured that out myself :sweat_smile:

1 Like