如何让Read More按钮仅在文本被截断时显示？

你的问题出在判断文本是否需要截断的逻辑上：原代码用字符长度（length过滤器）判断是否超过50，但实际截断是按单词数（truncatewords_html:50）来做的，两者不匹配，导致字符数超50但单词数没到50时按钮也会显示，反过来单词数超50但字符数不够时按钮又不显示。

修改方案 #

把模板里的判断条件从字符长度判断改成单词数判断，用Django的wordcount过滤器：

修改后的HTML代码：

<p><strong>Overview:</strong>
      <span class="overview">{{ game.overview|default:"N/A"|truncatewords_html:"50" }}</span>
      {% if game.overview|default:""|wordcount > 50 %}
      <span class="full-text" style="display: none;">{{ game.overview|default:"N/A" }}</span>
      <button class="read-button" onclick="readMore(this)">[Read more...]</button>
      {% endif %}
    </p>

说明 #

1. 用game.overview|default:""|wordcount > 50替代原有的game.overview|length > 50：

   • default:""是为了避免当game.overview为空时，默认值"N/A"的单词数（1）被误判；
   • wordcount过滤器会准确统计文本的单词数量，和truncatewords_html的截断逻辑完全匹配，只有当单词数超过50时，才渲染完整文本和按钮。

2. JS代码无需修改，保持原有功能即可。

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