Django模板中HTML按钮内文本格式化优化技术咨询

首先修正你CSS里的小问题：.myButtonClass中的white-space:normal后面缺少分号，会导致后续的border样式失效，补上即可：

.myButtonClass{
  display:inline-block;
  padding:8px 16px;
  vertical-align:middle;
  overflow:hidden;
  cursor:pointer;
  width:100%;
  text-align:left;
  white-space:normal; /* 补上分号 */
  border:1px solid #ccc;
  display:block;
  color:#000;
  background-color:#f1f1f1;
  margin-bottom:16px;
}

另外你Python代码里有个语法错误：{event_type]的右括号应该是大括号，改成{event_type}。

接下来针对你要实现的缩进/分块格式，提供两种实用方案：

方案1：模板内拆分数据构建结构化HTML（推荐） #

不要在Python端拼接成纯文本summary，直接把event_type和event_desc作为字段传递到模板，在模板里构建带样式的结构，更灵活易维护：

模板修改： #

{% for event in event_data.data %}
    <button onclick="myFunction('{{forloop.counter}}')" class="myButtonClass">
      <div class="summary-row">
        <span class="summary-label">type:</span>
        <span class="summary-content">{{ event.event_type }}</span>
      </div>
      <div class="summary-row">
        <span class="summary-label">description:</span>
        <span class="summary-content">{{ event.event_desc }}</span>
      </div>
    </button>
    <div id={{forloop.counter}} class="w3-container w3-hide">
        <pre>{{ event.data_raw | pprint }}</pre>
    </div>
{% endfor %}

添加对应CSS： #

/* 按钮内的行容器 */
.summary-row {
  margin: 4px 0;
  line-height: 1.4;
}
/* 标签固定宽度，实现对齐 */
.summary-label {
  font-weight: bold;
  display: inline-block;
  width: 100px;
}
/* 内容换行后自动缩进，和标签对齐 */
.summary-content {
  display: inline-block;
  margin-left: 8px;
  text-indent: -108px;
  padding-left: 108px;
}

这个方案能让长内容换行后自动缩进，保持和标签的对齐，实现规整的分块效果。

方案2：Python端生成HTML片段，模板安全渲染 #

如果必须在Python端处理summary，可以生成带HTML标签的字符串，然后用Django的safe滤镜渲染：

Python代码修改： #

summary = (f"<div class='summary-row'><span class='summary-label'>type:</span> <span class='summary-content'>{event_type}</span></div>"
           f"<div class='summary-row'><span class='summary-label'>description:</span> <span class='summary-content'>{event_desc}</span></div>")

模板修改： #

把原来的{{ event.summary|linebreaks }}改成{{ event.summary|safe }}，让Django直接渲染HTML标签而非转义：

<button onclick="myFunction('{{forloop.counter}}')" class="myButtonClass">{{ event.summary|safe }}</button>

同样需要添加方案1里的.summary-row、.summary-label、.summary-content样式。

两种方案都能实现你想要的缩进/分块效果，推荐方案1，它将数据与视图渲染分离，更符合Django的设计理念，也方便后续调整样式。

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