如何避免文本溢出容器？Flex布局文本重叠问题求助

你遇到的核心问题是没有给列表项启用弹性布局，导致两个子div的排版逻辑混乱，文本无法正常换行。试试下面的调整方案：

首先给<li>添加display: flex启用弹性布局，让两个子div横向排列；再给每个div设置flex: 1让它们平分可用空间，同时加上换行样式确保文本溢出时自动换行。

修改后的代码如下：

<li style="padding: 23px 5px 23px 19px; width: 100%; display: flex; gap: 10px;">
  <div style="flex: 1; word-wrap: break-word;"> Email Address </div>
  <div style="flex: 1; word-wrap: break-word;"> Antonina.Russel47@gmail.com </div>
</li>

关键样式说明： #

• display: flex：让列表项的子元素采用弹性布局，实现预期的横向排列效果
• flex: 1：让每个div占据相等的可用空间，容器变窄时会自动收缩，避免内容挤压重叠
• word-wrap: break-word：强制长文本（比如你的邮箱地址）在容器边缘处换行，不会溢出或超出范围
• gap: 10px：给两个div之间添加间距，让排版更宽松美观，避免内容挤在一起

你之前尝试的flex-wrap: nowrap其实是弹性布局的默认值，但因为没给<li>设置display: flex，所以这个样式根本没有生效。如果调整后还有问题，可以检查是否有全局样式（比如white-space: nowrap）覆盖了换行设置，或者容器的宽度是否被限制得过窄。

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