Element UI的el-table表格单元格文本换行问题，常常困扰开发者。本文通过一个案例分析，讲解其原因并提供解决方案。
问题描述： 用户希望el-table单元格内文本自动换行，但尝试添加<br>标签和内联样式均无效。代码片段如下：
<el-table-column label="详情" min-width="200" property="particulars">
<template #default="{row}">
<div v-for="item in row.overplans">
<div>
工作日
休息日
节假日
:
按审批时长计算
按打卡时间计算
按审批和打卡时长计算
;
</div>
</div>
</template>
</el-table-column>预期效果：单元格文本自动换行。实际效果：文本挤在一起。
问题分析与解决方案：
问题并非el-table本身的限制，而是CSS样式冲突导致。 white-space: nowrap、overflow: hidden等属性，或者父元素使用了flex布局但未设置flex-wrap: wrap，都会阻止文本换行。
本例中，问题可能出在<div v-for="item in row.overplans"><div>的嵌套结构上。建议修改代码结构，将<code>v-for循环移至外层：
<el-table-column label="详情" min-width="200" property="particulars">
<template #default="{row}">
<div>
<div v-for="item in row.overPlans">
工作日
休息日
节假日
:
按审批时长计算
按打卡时间计算
按审批和打卡时长计算
;
</div>
</div>
</template>
</el-table-column>通过调整代码结构，消除不必要的嵌套，通常可以解决换行问题。若仍无法换行，请检查元素的CSS样式，确保没有阻止文本换行的属性。 必要时，可手动添加word-break: break-all; 或 word-wrap: break-word; 样式到单元格的div中强制换行。
以上就是Element UI el-table单元格文本如何实现自动换行？的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
732
收藏
