TailwindCSS+Flask+Jinja站点移动端标题被截断 如何换行显示完整内容

问题原因 #

你的视频标题所在<h3>标签使用了Tailwind的truncate类，该类会强制文本单行展示，超出容器宽度的内容自动隐藏并显示末尾省略号，这是标题无法完整展示的直接原因。你之前尝试修改span标签没有生效，是因为截断逻辑是作用在父级<h3>标签上的，仅调整子元素无法覆盖父级的截断规则。

解决方案 #

按以下要求修改<h3>标签的类即可：

• 首先删除<h3>标签上的truncate类
• 给<h3>添加flex-1 min-w-0类：当前标题和下载按钮处于同一个flex布局容器内，flex-1会让标题自动占据除按钮外的所有剩余宽度，min-w-0用于解决flex子元素默认不收缩的问题，避免标题宽度溢出父容器。
• 如果你不想让标题无限换行，可以添加line-clamp-N类控制最多展示行数，比如line-clamp-2代表最多展示2行，超出部分才显示省略号。

修改后的代码示例：

<!-------------------------------------------TITLE OF THE VIDEO--------------------------->
<h3 class="text-sm font-thin text-gray-700 flex-1 min-w-0">
    <a href='{{links}}'>{{url_dict[links][0]}}</a>
</h3>

如果需要最多显示2行的版本：

<!-------------------------------------------TITLE OF THE VIDEO--------------------------->
<h3 class="text-sm font-thin text-gray-700 flex-1 min-w-0 line-clamp-2">
    <a href='{{links}}'>{{url_dict[links][0]}}</a>
</h3>

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