换行后防止 flexbox 子填充父宽度

Question

我在 flex 容器中有一个 span 和 anchor，它们水平和垂直居中。锚文本包含很少的非刹车空间，这是必要的 - 在中型上我想将它显示为单行，在小的它必须是双行的，其中第二行的文本由 nbsps 定义。我的问题是，当涉及到打破小的锚文本时，水平居中不起作用，因为锚占据了父宽度的其余部分，所以标签和锚都留在父的左侧。

有什么方法可以防止多行锚点填充父项的宽度吗？

请检查以下图片和代码段。谢谢你的任何想法。

中等效果很好... Medium - fine

它如何处理小的和我不想要的 small - don't want

我想要的小 small - want

.parent {
  border: 1px solid blue;
  padding: 10px;
  display: flex;
  justify-content:center;
  align-items: center;
}
.parent span {
  margin-right: 5px;
}

<div class="parent">
  <span>Label:</span>
  <a href="#">One liner on medium, or&nbsp;two&nbsp;liner&nbsp;on&nbsp;small.</a>
</div>

Answer 1

一种方法是将您想要在换行符上的文本包装在 <span> 标记中，并使用媒体查询来确定您希望换行符出现的宽度。默认情况下，<span> 个元素是 inline，并且会自动增长到 content/container 的大小。您需要将 <span> 显式设置为 display: block 才能使其正常工作。（我还删除了标记中的所有不间断空格）。

我相信还有很多其他解决方案，这只是一个想法。

希望对您有所帮助，祝您好运！

.parent {
  border: 1px solid blue;
  padding: 10px;
  display: flex;
  justify-content:center;
  align-items: center;
}

.parent span {
  margin-right: 5px;
}

@media (max-width: 400px) {
  .newline {
    display: block;
  }
}

<div class="parent">
  <span>Label:</span>
  <a href="#">One liner on medium,<span class="newline">  or two line on small.</span></a>
</div>

换行后防止 flexbox 子填充父宽度

Prevent flexbox child fill parent width after line break

children

line-breaks

width

fill

flexbox