移动端分割线两端文字在小屏幕挤在一起怎么办？

这个问题我也踩过坑，给你分享个实用方案。

你这个布局挤在一起的根本原因是：flex容器强行把所有子元素都塞在一行里。我们可以这样优化：

.divider-with-text {

  display: flex;

  justify-content: space-between;

  align-items: center;

  padding: 12px 0;

  flex-wrap: wrap; /* 允许换行 */

}



.divider-with-text::before,

.divider-with-text::after {

  content: '';

  flex: 1 1 100%; /* 先占满整行 */

  border-bottom: 1px solid #ccc;

  margin: 8px 0;

}



/* 给文字容器加个最小宽度 */

.divider-text {

  min-width: 30%; /* 控制最小宽度，防止太挤 */

  text-align: center;

}

使用时注意结构：

<div class="divider-with-text">

  <div class="divider-text">左边文字很长会换行</div>

  <div class="divider-text">右边文字也长</div>

</div>

关键点：
1. 允许flex容器换行
2. 把伪元素拉成单独的一行
3. 给文字容器加最小宽度限制

这样在小屏幕上会自动变成：

左边文字很长会换行

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

     右边文字也长

在宽屏上又能自动恢复成左右分布的分割线样式。数值可以根据你的实际内容调整，希望能帮到你！

这个问题我遇到过，移动端确实容易出现这种文字挤在一起的情况。你现在的写法没问题，但需要加点响应式处理。

直接上方案：给两边的文字加上min-width和overflow处理，超出部分用省略号代替。这样即使屏幕很小，文字也不会挤到中间去。

.divider-with-text {

  display: flex;

  justify-content: space-between;

  align-items: center;

  padding: 12px 0;

}

.divider-with-text::before,

.divider-with-text::after {

  content: '';

  flex: 1;

  border-bottom: 1px solid #ccc;

  margin: 0 8px;

}



.divider-with-text > span {

  white-space: nowrap; /* 防止文字换行 */

  overflow: hidden; /* 超出部分隐藏 */

  text-overflow: ellipsis; /* 显示省略号 */

  min-width: 40px; /* 给个最小宽度，防止太窄 */

  max-width: 50%; /* 控制最大宽度，避免占满屏幕 */

}

再配合媒体查询，小屏幕下可以把margin调大一点，或者改用单行显示：

@media (max-width: 480px) {

  .divider-with-text::before,

  .divider-with-text::after {

    margin: 0 16px; /* 调大间距 */

  }

}

这样基本就能解决你的问题了。测试一下吧，如果还有其他特殊情况再调整。前端这种布局问题，很多时候就是靠这些小技巧来搞定的。