Question

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

有没有办法阻止多行锚点填充父的宽度？

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

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

它如何适用于小型和我不想要的 small - don't want

我想要什么？ small - want

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

一种方法是将您想要的文本换行到<span>标记中的换行符，并使用媒体查询来确定您希望换行符的宽度。默认情况下，<span>元素为inline，并且会自动增长到其内容/容器的大小。您需要明确将<span>设置为display: block才能使其生效。（我还删除了标记中的所有非中断空格）。

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

希望有帮助＆amp;祝你好运！

.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子填充父宽度

1 个答案: