如何修改CSS实现视口过小时右浮动元素自动换行至新行

最优解决方案（纯CSS实现，无需JS） #

改用Flex布局即可完美实现需求，无需修改HTML结构，仅需要调整CSS代码：

修改后的完整CSS代码 #

.subsectionTitle{
    font-weight: 700;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px; /* 可根据设计调整两个元素的最小间距 */
}

.subsectionTitle__title{
    flex: 1;
    word-wrap: break-word;
}

.subsectionTitle__date{
    white-space: nowrap; /* 保证日期始终在一行显示 */
}

实现逻辑说明 #

• 父容器开启Flex布局后，两个子元素默认在同一行排列，justify-content: space-between 自动实现左右两端对齐
• 给标题设置 flex:1 让它自动占满除了日期宽度之外的所有可用空间，文本超出时自动换行
• 给日期设置 white-space: nowrap 保证日期不会被挤成多行，始终固定在容器右上角

兼容极端场景的JS方案（仅当需要兼容IE9及以下浏览器时使用） #

如果你的项目需要兼容不支持Flex的老旧浏览器，可以用JS动态计算宽度实现：

function adjustTitleLayout() {
  const container = document.querySelector('.subsectionTitle')
  const dateEl = document.querySelector('.subsectionTitle__date')
  const titleEl = document.querySelector('.subsectionTitle__title')
  // 给标题设置最大宽度 = 容器宽度 - 日期宽度 - 预留间距
  const maxWidth = container.offsetWidth - dateEl.offsetWidth - 12
  titleEl.style.maxWidth = maxWidth + 'px'
}
// 页面加载和窗口 resize 时触发计算
window.addEventListener('load', adjustTitleLayout)
window.addEventListener('resize', adjustTitleLayout)

对应的CSS保留原来的float逻辑，给标题加 word-wrap: break-word 即可。

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