HTML 按钮内的文本格式

Question

编辑：我已经能够解决问题的第一部分：如果需要，可以使用自动换行将文本包裹在按钮内。看来添加

white-space:normal

就足够了。

我有一个主要显示手风琴的 Django 模板，我们使用 w3 作为 CSS 框架。

<style>
  .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;
  };
  .myButtonClass:disabled{
    cursor:not-allowed;
    opacity:0.3;
  }
  .myButtonClass:hover{
    color:#000!important;
    background-color:#ccc!important;
  }
</style>
{% for event in event_data.data %}
    <button onclick="myFunction('{{forloop.counter}}')" class="myButtonClass">{{ event.summary|linebreaks }}</button>
    <div id={{forloop.counter}} class="w3-container w3-hide">
        <pre>{{ event.data_raw | pprint }}</pre>
    </div>
{% endfor %}

<script>
    function myFunction(id) {
      var x = document.getElementById(id);
      if (x.className.indexOf("w3-show") == -1) {
        x.className += " w3-show";
      } else { 
        x.className = x.className.replace(" w3-show", "");
      }
    }
</script>

按钮中要显示的字符串位于“event.summary”中。

现在，在 python 中，此文本是使用 f-string 生成的：

summary = (f"type: {event_type]}\n"
           f"description: {event_desc}")

我想格式化该文本在按钮中的显示方式。现在它是非常基本的，因为我使用 Django 内置的模板过滤器，它看起来像这样：

第一个问题是，如果描述与按钮大小相比太长，则文本会在按钮右边缘被剪切。因此，如果需要，我希望将文本包含在按钮内并自动换行。 然而，通过这样做，它看起来像：

虽然我希望它是这样的： 或者如果可能的话甚至更好：

这可能意味着应该有一些特定于按钮文本和“描述”一词的 html 格式，并且文本组件应该是四个单独的变量，这是可能的。但是，我不知道如何为按钮内的文本实现特定的 html 格式。

Answer 1

最后，解决问题的第二部分（即格式化文本在按钮中的显示方式）非常简单。我不确定这是否是最好的解决方案，但我将

summary

修改为字典而不是字符串并使用了表格。 所以

summary

现在是：

summary = {"type": event_type, "description": event_desc}

还有 html 模板：

<style>
  .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;
  };
  .myButtonClass:disabled{
    cursor:not-allowed;
    opacity:0.3;
  }
  .myButtonClass:hover{
    color:#000!important;
    background-color:#ccc!important;
  }
  td {
    vertical-align: top;
  }
  .right-1 td:nth-child(1){
    padding-right: 10px;
  }
</style>
{% for event in event_data.data %}
    <button onclick="myFunction('{{forloop.counter}}')" class="myButtonClass">
    <table style="border-collapse: collapse" class="right-1">
      <tr>
        <td><strong>type:</strong></td>
        <td>{{ event.summary.type }}</td>
      </tr>
      <tr>
        <td><strong>description:</strong></td>
        <td>{{ event.summary.description }}</td>
      </tr>
    </table>
    </button>
    <div id={{forloop.counter}} class="w3-container w3-hide">
    <pre>{{ event.data_raw | pprint }}</pre>
    </div>
{% endfor %}

<script>
    function myFunction(id) {
      var x = document.getElementById(id);
      if (x.className.indexOf("w3-show") == -1) {
        x.className += " w3-show";
      } else { 
        x.className = x.className.replace(" w3-show", "");
      }
    }
</script>

现在看起来很整洁。但如果有人有更优雅的方法，我很乐意学习。