如何让Div内的超长文本自动换行且不溢出容器？

你的问题核心是单行垂直居中的line-height设置和固定容器高度冲突，导致多行文本时要么溢出要么布局错乱。可以用以下方案修改：

修改后的代码 #

noplot_message = f'<div style="width: 200px; height: 200px; border: 1px solid black; display: flex; align-items: center; justify-content: center; padding: 10px; box-sizing: border-box; word-break: break-all; overflow: auto;">{message}</div>'

关键修改点说明 #

• 用display: flex + align-items: center + justify-content: center替代line-height: 200px：flex布局能完美实现多行文本的垂直+水平居中，不会像line-height那样导致行间距异常。
• 添加padding:10px和box-sizing:border-box：避免文本紧贴容器边框，同时保证内边距不会撑大容器（box-sizing让宽高包含内边距和边框）。
• word-break: break-all：强制长文本在任意位置换行，确保文本不会横向溢出容器。
• overflow: auto：如果文本高度超过容器，会自动显示滚动条，既不侵占其他元素空间，也能完整查看内容；如果不需要滚动条，换成overflow: hidden即可隐藏溢出部分。

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