如何使包含Jinja变量的<span>适配div并实现自动换行？

要让span内容超出容器宽度时自动换行，你需要调整几个CSS属性，核心是让span能在父容器范围内自动折行：

• 移除span上的display: inline-block和width: fit-content：这两个属性会让span宽度贴合内容，无法触发自动换行。
• 给span添加换行控制属性：使用overflow-wrap: break-word（现代浏览器支持）或word-wrap: break-word（兼容旧浏览器），如果内容包含连续无空格的字符串，这个属性会强制拆分长内容换行；如果需要保留内容中的空格和换行，再加上white-space: pre-wrap。
• 调整父元素的布局：比如把list-group-item的display: inline-block改成block，让它占满父容器的可用宽度，给span提供足够的换行空间；同时移除card上重复的style属性（浏览器只会识别最后一个，建议合并成一个）。

修改后的代码示例：

<div class="card" style="width: 150%; display:table;">
  <div class="card-header" style="display:table;">
    <p class="display-4 bold" style="font-size: 30px;">Voici la transcription et traduction :</p> 
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item" style="display: block;">
      ADN
      <div class="input-group-prepend">
        <span class="input-group-text" id="basic-addon1" style="font-size: 15px; overflow-wrap: break-word;">{{ generationdata[0] }}</span>
      </div>
    </li>
    <li class="list-group-item" style="display: block;">
      ARN
      <div class="input-group-prepend">
        <span class="input-group-text" id="basic-addon1" style="font-size: 15px; overflow-wrap: break-word;">{{ generationdata[1] }}</span>
      </div>
    </li>
    <li class="list-group-item" style="display: block;">
      Protéine
      <div class="input-group-prepend">
        <span class="input-group-text" id="basic-addon1" style="font-size: 15px; overflow-wrap: break-word;">{{ generationdata[2] }}</span>
      </div>
    </li>
  </ul>
</div>

如果你的内容是连续无空格的长字符串（比如长序列），overflow-wrap: break-word会直接拆分内容换行；如果内容有空格，默认的white-space: normal就会自动换行，加上这个属性更保险。

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