Bootstrap’s cards. How to shorten the words in card with … . Django & CSS

Question

I am using the Bootstrap’s card to display my journals. It looks like this:

Journal List

However, when I insert a lot of word, the card size will be veryyyy long.

Journal List With really long essay

How to make it when there are long essays, it will shown like this:

Today is a good day. I started my day with coding. However, I found out that I …

Make it like "…"

This is the html code:

<div class = "container mt-4 mb-4">
    <div class="center_journal">
        <div class="col">
            <div class="row">
                {% for journal in journals %}
                <div class="card d-flex flex-column col-4 " style="width: 36rem;">
                    <h5 class="card-title text-center mt-4"><a href="{% url 'journal_detail' journal.id %}" >{{ journal.title }}</a></h5>
                    {% if journal.photo %}
                    <img src="{{ journal.photo.url }}" class="card-img-top" alt="...">
                    {% endif %}
                    <div class="card-body">
                        {% if journal.audio %}
                        <audio controls>
                            <source src="{{ journal.audio.url }}" type="audio/ogg">
                            <source src="{{ journal.audio.url }}" type="audio/mpeg">
                            <source src="{{ journal.audio.url }}" type="audio/wav">
                            Your browser does not support the audio element.
                        </audio>
                        {% endif %}
                        <p class="card-content text-center">{{ journal.content }}</p>
                        <p class="text-center font-weight-light">Created on {{ journal.date_created|date:'Y-m-d H:i' }}</p>
                        {% if journal.favourite %}
                        <div class="text-center font-weight-light">
                            <p>Added to Favourite!</p>
                        </div>
                        {% endif%}
                        <!-- <div class="text-center">
                            <a href="{% url 'journal_detail' journal.id %}" ><button class=" btn btn-outline-info">View</button></a>
                        </div> -->
                    </div>
                </div>
                {% endfor %}
            </div>
        </div>
    </div>
</div>

SOLVED!
{{ journal.content | truncatewords:10}}

The result would be:

Asked By: lilsnow02

||

Source

Answer 1

You can truncate the lengths of the text with a Django template filter.
With truncatewords you are able to set a maximum word count. Django will add an ellipsis if the text is longer and cut it at that word:

{{ value|truncatewords:2 }}

Answered By: Marco

Answer 2

If you’re using Bootstrap v5.0 there is a classname for truncating text text-truncate (docs)

Or if you don’t bother adding a custom style, you could use -webkit-line-clamp property as below

.card-text {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
}

This will truncate a text with more than 2 lines in length.

Answered By: T R A C E ツ

Bootstrap’s cards. How to shorten the words in card with … . Django & CSS

Question:

Answers: