layui table自动换行、自适应换行（已解决v2.4.5）

青旅半醒 2024-04-18 17:33 0阅读 0赞

## 改样式前效果： ##

不直观，超出内容没有自动换行，且不适应产品需求（超出部分需要自动换行）

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NlZXN1bjIwMTI_size_16_color_FFFFFF_t_70]

--------------------

## 代码： ##

将以下css样式覆盖到当前html文件的头部样式中即可：

.layui-table-cell { 
                font-size:14px;
                padding:0 5px;
                height:auto;
                overflow:visible;
                text-overflow:inherit;
                white-space:normal;
                word-break: break-all;
            }

--------------------

## 修改后： ##

自动铺满换行，超出部分已展开  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NlZXN1bjIwMTI_size_16_color_FFFFFF_t_70 1]

--------------------

参考文献：

## layui table 填写数据内容过多，自动换行完美解决： ##

[https://blog.csdn.net/cdsn13082487212/article/details/91039184][https_blog.csdn.net_cdsn13082487212_article_details_91039184]

注：以上内容仅提供参考和交流，请勿用于商业用途，如有侵权联系本人删除！

--------------------

## 持续更新中… ##

如有对思路不清晰或有更好的解决思路，欢迎与本人交流，QQ群：273557553  
你遇到的问题是小编创作灵感的来源！

--------------------

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NlZXN1bjIwMTI_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/d77e957d67bb4f94b25f569aafc69211.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NlZXN1bjIwMTI_size_16_color_FFFFFF_t_70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/6554533ffc1347f88864a4d48e15b2e3.png
[https_blog.csdn.net_cdsn13082487212_article_details_91039184]: https://blog.csdn.net/cdsn13082487212/article/details/91039184