编辑:我已经能够解决问题的第一部分:如果需要,可以使用自动换行将文本包裹在按钮内。看来添加
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 格式。
最后,解决问题的第二部分(即格式化文本在按钮中的显示方式)非常简单。我不确定这是否是最好的解决方案,但我将
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>
现在看起来很整洁。但如果有人有更优雅的方法,我很乐意学习。