CSS实现标题与URL并排布局：URL收缩溢出后换行需求

我刚好折腾过类似的布局需求，用Flexbox完全能实现，不过得注意几个容易踩坑的属性设置，给你把方案拆解清楚：

核心实现思路 #

我们要给标题和URL单独套一个flex子容器，控制它内部的收缩逻辑；外层容器保持flex-wrap: wrap让其他元素正常排列。关键是让标题不收缩，URL优先收缩并溢出省略，直到URL达到最小宽度后，标题和URL再换行。

完整代码示例 #

<div class="outer-container">
  <!-- 标题+URL组 -->
  <div class="title-url-wrapper">
    <h3 class="content-title">我的项目名称：这是一个有点长的标题</h3>
    <span class="content-url">https://example.com/projects/2024/frontend/responsive-layout-demo</span>
  </div>
  <!-- 其他元素 -->
  <div class="extra-item">标签：响应式布局</div>
  <div class="extra-item">更新时间：2024-05-20</div>
</div>

/* 外层容器：控制所有元素的整体排列，其他元素正常换行 */
.outer-container {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 1.5rem;
  border: 1px solid #e0e0e0;
  max-width: 800px;
  margin: 0 auto;
}

/* 标题+URL的子容器：控制内部元素的收缩与换行 */
.title-url-wrapper {
  display: flex;
  flex-wrap: wrap; /* 达到阈值后允许内部换行 */
  align-items: center;
  gap: 0.8rem;
  min-width: 0; /* 关键！打破flex容器默认的min-width:auto，让URL能正确收缩溢出 */
}

/* 标题：固定宽度，不收缩 */
.content-title {
  flex-shrink: 0;
  margin: 0;
  font-size: 1.1rem;
  color: #333;
}

/* URL：优先收缩，到最小宽度后触发换行 */
.content-url {
  flex-shrink: 1;
  min-width: 150px; /* 你自定义的最小宽度，到这个值就换行 */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #007bff;
  cursor: pointer;
}

/* 其他元素样式（保持原有inline/flex项特性） */
.extra-item {
  padding: 0.5rem 1rem;
  background-color: #f8f9fa;
  border-radius: 4px;
}

关键属性说明 #

1. .title-url-wrapper的min-width: 0：这是最容易忽略的点！Flex容器默认会给子元素设置min-width: auto，导致URL无法收缩到自身内容宽度以下，加这个属性才能让URL的溢出省略生效。
2. content-title的flex-shrink: 0：强制标题不被压缩，保证内容完整性，优先让URL承担收缩任务。
3. content-url的三个溢出属性：overflow: hidden、text-overflow: ellipsis、white-space: nowrap组合实现单行溢出时显示省略号，用户能直观看到这是一个被截断的链接。
4. title-url-wrapper的flex-wrap: wrap：当容器宽度小于「标题宽度 + URL最小宽度」时，标题和URL自动换行，避免内容被强行挤压。

这样调整后，就能完美实现你要的效果：宽屏时标题URL并排，窄屏时URL先收缩省略，到最小宽度后自动换行，其他元素也能正常按flex-wrap逻辑排列~

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