如何实现右浮动按钮在左侧内容溢出时换行到下方表现为block元素

解决方案 #

你可以用flex布局实现需求，之前设置flex-wrap: wrap不生效是因为没有限制文本节点的最小压缩宽度，flex默认会尽可能压缩子项宽度避免换行，调整后代码如下：

完整CSS代码 #

.div-wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  row-gap: 8px; /* 控制换行后上下间距，可自定义 */
  column-gap: 12px; /* 控制同行文和按钮的横向间距，可自定义 */
}
.div-wrapper span {
  min-width: 150px; /* 文本可压缩的最小宽度，容器宽度小于「该值+按钮宽度」时触发换行，可自定义 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; /* 文本溢出显示省略号，不需要可删除 */
}
.div-wrapper button {
  margin-left: auto; /* 按钮默认靠右对齐，替代原来的float:right */
  flex-shrink: 0; /* 按钮宽度不被压缩 */
}

HTML代码（无需修改原有结构） #

<div class="div-wrapper"> 
  <span> Some data here....(when this text overflows, make button come to the bottom left) </span> 
  <button> 
     Redeem
   </button>
</div>

扩展：换行后按钮变为块级占满整行 #

如果需要换行后按钮占满整行，追加如下媒体查询即可：

/* 括号里的数值替换为你实际的「文本最小宽度+按钮宽度」 */
@media (max-width: calc(150px + 80px)) {
  .div-wrapper button {
    margin-left: 0;
    width: 100%;
  }
}

效果参考 #

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