Django表格单元格文本过长时如何实现截断省略显示？

要实现固定单元格尺寸、文本超出后截断显示省略号，只需通过CSS组合属性即可完成，具体步骤如下：

1. 添加CSS样式
   在你的home.html文件中，在表格所在位置的上方（或页面的<head>标签内）插入以下CSS代码：

/* 让表格采用固定布局，确保单元格宽度生效 */
.table-fixed {
  table-layout: fixed;
  width: 100%;
}

/* 文本截断核心样式 */
.truncate-cell {
  white-space: nowrap; /* 禁止文本换行 */
  overflow: hidden; /* 隐藏超出单元格的内容 */
  text-overflow: ellipsis; /* 超出部分显示省略号 */
}

/* 确保单元格内的链接也继承截断样式 */
.truncate-cell a {
  display: block;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

2. 修改表格与单元格代码

• 给包裹帖子的<table>标签添加table-fixed类，确保表格布局固定：

<table class="table-fixed">
  <!-- 你的表头和帖子循环代码 -->
</table>

• 给需要截断文本的单元格（比如标题列、作者名列）添加truncate-cell类，保留原宽度设置：

{% for post in posts %}
<tr>
  <td>{% pagination_reverse_numbering paginator page_obj forloop.counter0 %}</td>
  <td style="width:10%" class="truncate-cell">
    <a class="mr-2" href="{% url 'post-detail' post.id %}">{{ post.title }}</a>
  </td>
  <td class="truncate-cell">
    <a class="mr-2" href="{% url 'user-posts' post.author.id %}">{{ post.author.first_name }} {{ post.author.last_name }}</a>
  </td>
  <td>{{ post.date_posted|date:"j.n.Y" }}</td>
</tr>
{% endfor %}

这样设置后，所有应用了truncate-cell类的单元格会固定宽度，文本超出时自动截断并显示省略号，不会再因为换行导致行高变大。

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