HTML 按钮内的文本格式

问题描述 投票:0回答:1

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

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 内置的模板过滤器,它看起来像这样: enter image description here

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

虽然我希望它是这样的: enter image description here 或者如果可能的话甚至更好: enter image description here

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

html css django-templates w3.css
1个回答
0
投票

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

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>

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

© www.soinside.com 2019 - 2024. All rights reserved.