Nunjucks模板折叠功能问题：展开后文本换行而非接续显示

嘿，我来帮你搞定这个需求！要让剩余内容在点击"more"后从新行开始显示，核心是处理行内元素和块级元素的布局差异——原来的代码里用<span>包裹剩余文本，它是行内元素，所以会跟前面的内容挤在同一行。这里给你两个实用的解决方案：

方案1：改用块级容器（推荐，语义化更友好） #

把包裹剩余文本的<span>换成<div>，块级元素会自动占据整行，自然和前面的文本换行分隔：

<p class="meta-info-decription">
  <span>
    {% if(wikipedia.wiki_extract.length > 100 ) %}
      {{ wikipedia.wiki_extract.slice(0,100) }}
      <span class="read-more more clickable" data-toggle="collapse" data-target="#wiki-text">...more </span>
      <!-- 替换为div，实现自动换行 -->
      <div id="wiki-text" class="collapse">
        {{ wikipedia.wiki_extract.slice(100)}}
        <span class="read-more less" data-toggle="collapse" data-target="#wiki-text">less ... </span>
      </div>
    {% else %}
      {{ wikipedia.wiki_extract }}
    {% endif %}
  </span>
  <a href="{{ wikipedia.wiki_url }}" target="_blank"> Wikipedia </a>
</p>

方案2：手动添加强制换行标签 #

如果不想改变容器类型，直接在剩余文本前加<br>标签也能实现换行效果：

<p class="meta-info-decription">
  <span>
    {% if(wikipedia.wiki_extract.length > 100 ) %}
      {{ wikipedia.wiki_extract.slice(0,100) }}
      <span class="read-more more clickable" data-toggle="collapse" data-target="#wiki-text">...more </span>
      <span id="wiki-text" class="collapse">
        <!-- 加<br>强制换行 -->
        <br>{{ wikipedia.wiki_extract.slice(100)}}
        <span class="read-more less" data-toggle="collapse" data-target="#wiki-text">less ... </span>
      </span>
    {% else %}
      {{ wikipedia.wiki_extract }}
    {% endif %}
  </span>
  <a href="{{ wikipedia.wiki_url }}" target="_blank"> Wikipedia </a>
</p>

小提示： #

• 方案1更推荐，因为块级元素的布局逻辑更清晰，后续调整样式（比如缩进、间距）也更方便。
• 顺便帮你修正了原代码里的一个小问题：<p>标签里的{{wikipedia.wiki_url}}是无效属性，我已经把它移除了，应该是不小心写错位置啦。

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