如何在Bootstrap卡片中截断长文本？Django+CSS实现

我用Bootstrap的Card组件展示日志内容，正常状态下显示效果良好，但当日志内容过长时，卡片会被拉伸得很长，破坏页面布局。想要实现长文本自动截断并以“...”结尾的效果，例如“今天是个好日子。我从编程开启一天，然而我发现我...”。

原始HTML代码 #

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

解决方案 #

使用Django内置的truncatewords过滤器，修改展示日志内容的<p>标签代码：

<p class="card-content text-center">{{ journal.content | truncatewords:10}}</p>

其中10代表保留10个单词后截断，可根据实际需求调整数值，实现长文本自动截断并添加“...”的效果，彻底解决卡片被拉伸的布局问题。

内容的提问来源于stack exchange，提问作者lilsnow02