如何让flex-wrap容器内的子元素行内换行而非以块级形式换行？

问题核心原因 #

原来的flex布局设置flex-wrap: wrap后，当标题长度超过容器单行宽度时，两个flex项会分两行排布，第二行的URL因为设置了flex:1会自动占满整行宽度，就会和上一行标题末尾之间形成大块空白。

可行CSS解决方案 #

放弃flex布局，改用行内格式化上下文配合inline-block元素实现需求，代码如下：

CSS代码

.container {
  line-height: 1.5; /* 可根据设计调整行高 */
}

.title {
  display: inline;
  margin-right: 0.5em; /* 标题和URL的间距，可自行调整 */
}

.url {
  display: inline-block;
  max-width: 100%;
  min-width: 128px;
  font-size: 80%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: baseline; /* 和标题基线对齐，还原原flex布局的视觉效果 */
}

HTML代码

<div class="container">
  <span class="title">
    Some really long title that will wrap on small screens creating a block
  </span>
  <a class="url" href="#">
    www.example.com/a/long/link/that-should-truncate-when-there-is-not-space
  </a>
</div>

效果说明 #

• 大屏场景下标题不换行时，URL跟在标题后方，占满剩余可用宽度后自动截断，符合你最初选择flex布局的预期
• 小屏或标题过长换行时，URL会自动跟在标题最后一行的末尾，利用最后一行的剩余空间展示，不会出现大块空白
• 所有现代浏览器均支持该方案，无兼容问题

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